Maison > Article > interface Web > Quelles sont les nouveautés de Webpack3 ?
Quelles sont les nouveautés de Webpack3 ?
- PHP中文网original
- 2017-06-21 09:41:222491parcourir
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!