Explication détaillée des étapes de mise à niveau de vue cli webpack4

Cette fois, je vais vous apporter une explication détaillée des étapes de mise à niveau de webpack 4 depuis vue cli Quelles sont les précautions pour mettre à niveau webpack 4 depuis vue cli Ce qui suit est un cas pratique, prenons. un regard.

webpack4 est sorti depuis un certain temps et le système de plug-ins s'est stabilisé. Je ne suis pas satisfait de la vitesse de packaging de webpack3, j'ai donc décidé de mettre à niveau le projet sur lequel je travaille actuellement, et je viens de le faire. je veux pratiquer webpack4.

Nouvelles fonctionnalités

0 Configuration

Il faudrait qu'après la sortie du colis, l'équipe du webpack se soit rendu compte que sa configuration est effectivement un peu compliquée et pas facile de démarrer. ainsi, webapck4 commence à prendre en charge le démarrage sans configuration. Cependant, la même chose reste vraie. La configuration 0 de webpack4 ne prend en charge que l'entrée et la sortie par défaut, c'est-à-dire que l'entrée par défaut est ./src et la sortie par défaut est /dist.

Sélection du modemode

le mode a deux options, production et développement. En tant qu'option obligatoire, le mode ne peut pas être défini par défaut. En mode production, certaines optimisations nécessaires seront effectuées par défaut, telles que la compression du code et la promotion de la portée, et process.env.NODE_ENV sera spécifié comme production par défaut. En mode développement, les builds incrémentielles sont optimisées, les commentaires et les invites sont pris en charge et les mappages sources sous eval sont pris en charge, tandis que process.env.NODE_ENV est spécifié comme développement par défaut.

sideEffects

Cette configuration peut réduire considérablement le volume de l'emballage. Lorsque le package.json du module est configuré avec sideEffects:false, cela indique que le module n'a aucun effet secondaire, ce qui signifie que webpack peut nettoyer en toute sécurité le code utilisé pour les réexportations.

Types de modules

webpack4 propose 5 types de modules.

1. json : données au format JSON qui peuvent être importées via require et importées (la valeur par défaut est le fichier .json)

2. webassembly : module WebAssembly, (actuellement le type par défaut pour les fichiers .wasm)

3. javascript/auto : (type par défaut dans webpack 3) prend en charge tous les systèmes de modules JS : CommonJS, AMD.

4. javascript/esm : module EcmaScript (fichier .mjs par défaut).

5. javascript/dynamic : prend uniquement en charge CommonJS et AMD.

JSON

webpack 4 prend non seulement en charge le traitement natif de JSON, mais prend également en charge le Tree Shaking de JSON. Lors de l'utilisation de la syntaxe ESM pour importer json, webpack éliminera les exportations inutilisées dans le module JSON. De plus, si vous souhaitez utiliser le chargeur pour convertir json en js, vous devez définir le type sur javascript/auto.

optimisation

Webpack 4 a supprimé le CommonsChunkPlugin et a activé bon nombre de ses fonctionnalités par défaut. Par conséquent, webpack4 peut obtenir une bonne optimisation par défaut. Cependant, pour ceux qui nécessitent des stratégies de mise en cache personnalisées, optimisation.splitChunks et optimisation.runtimeChunk ont ​​été ajoutés. Pour une explication spécifique, veuillez vous référer à cet article, qui est expliqué en détail. RIP CommonsChunkPlugin cliquez pour prévisualiser
.

Mise à niveau étape par étape

J'ai mis à niveau le projet vue cli d'origine De manière générale, la mise à niveau s'est relativement bien déroulée. Ici, nous la divisons en deux étapes, d'abord. mettez à niveau les plug-ins dépendants associés, puis optimisez le webapckfichier de configuration.

Mettre à niveau les plug-ins

Tout d'abord, mettez à niveau les plug-ins répertoriés ci-dessous vers la version correspondante ou la dernière version

webpack@ 4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html- webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2. 2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@ 3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

Si vous rencontrez d'autres erreurs de package, cela devrait être résolu par mise à niveau vers le dernier.

Mettre à jour le fichier de configuration

webpack.dev.conf.js

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

总结

总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue todo-list组件上传npm

JS操作DOM删除节点

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!