Quelles sont les nouveautés de Webpack3 ?

Cet article partage brièvement les nouvelles fonctionnalités de la dernière version de Webpack 3 pour votre référence.

1. Nouvelles fonctionnalités de Webpack 3

Le 20 juin, Webpack a publié la dernière version 3.0 et l'a annoncé sur Medium.

Webpack est désormais presque la norme pour le développement front-end, jetons donc un coup d'œil aux principales mises à jour de fonctionnalités de la nouvelle version.
Les changements globaux ne sont pas importants par rapport à la version 2.0, alors pas de panique.
Pour les didacticiels vidéo associés sur Webpack 2.0, vous pouvez vous référer aux 20 épisodes de didacticiels vidéo que j'ai enregistrés, Webpack 2 Video Tutorials.
Ce qui suit est la liste des fonctionnalités de la version v3.0.

• les node_modules ne sont plus mutilés en ~ dans les statistiques [changement révolutionnaire]

• le délai d'expiration pour les requêtes HMR est configurable

• ajout du Scope Hoisting expérimental (webpack.optimize.ModuleConcatenationPlugin)

• quelques améliorations des performances

• ajout de output.libraryExport pour sélectionner une exportation pour la bibliothèque

• sourceMapFilename prend désormais en charge [contenthash] [breaking change]

• module.noParse prend en charge les fonctions

• Ajouter un nœud : option false pour désactiver tous les ajouts spécifiques au nœud

1.1 Méthode de mise à jour et migration de version

Vous pouvez l'installer directement via la commande, vous avez besoin pour l'ajouter ultérieurement Numéro de version.

npm install webpack@3.0.0 --save-dev

ou

yarn add webpack@3.0.0 --dev

En ce qui concerne la mise à niveau de Webpack 2 vers Webpack 3, les mots officiels sont :

aucun effort au-delà de l'exécution des commandes de mise à niveau dans votre terminal

On peut donc conclure que même si le numéro de version a considérablement changé, il n'y aura pas beaucoup de changement, vous pouvez donc pousser un soupir de soulagement.

1.2 Scope Hoisting

Chaque module auparavant était inclus dans une fermeture de fonction indépendante. Cette méthode de traitement provoquait le problème de l'exécution lente du code dans le navigateur.
Après avoir fait référence à des frameworks tels que Closure Compiler et RollupJS, l'équipe de développement a modifié la méthode d'encapsulation des fermetures de fonctions en une forme configurable.
Configurez-le simplement dans les plugins précédents.

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

Bien entendu, la configuration peut échouer en raison du chargement de certains modules. Les paramètres CLI officiels --display-optimization-bailout sont fournis pour le débogage de ce qui provoque l'échec de la configuration.

1.3 Commentaires magiques

En fait, vous pouvez commander le nom du morceau.

import(/* webpackChunkName: "my-chunk-name" */ 'module');

Pour plus d'utilisation, veuillez vous référer ici.

2. Nouvelles fonctionnalités suivantes

• Meilleur cache de compilation

• Vitesse de compilation rapide et incrémentielle

• Support plus convivial pour TypeScript

• Modifier la mise en cache à long terme

• Ajouter la prise en charge du module WASM

• Amélioration de l'expérience utilisateur

3 Résumé

Dans l'ensemble, il n'y a pas beaucoup de changement, et commeMagic Comments D'autres fonctions ont été publiées dans. version 2.4. Personnellement, je pense que sortir une version 3.0 est avant tout un symbole de la détermination de l'équipe à proposer de meilleurs produits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!