Quelles étapes sont nécessaires pour vue cli+webapck4

Cette fois, je vais vous apporter les étapes requises pour vue cli+webapck4, et quelles sont les précautions pour vue cli+webapck4. Ce qui suit est un cas pratique, jetons un œil.

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.

Mode de sélection de mode

Le mode comporte 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 (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 le 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 fichier de configuration webapck.

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 des erreurs provenant d'autres packages, cela devrait être résolu en mettant à niveau vers le dernier .

Mettre à jour le fichier de configuration

webpack.dev.conf.js

L'environnement de développement n'a pas beaucoup changé Après tout, une grande partie de l'environnement de développement. L'optimisation de webpack4 est pour Dans l'environnement de production, il suffit de supprimer certains plug-ins qui ne sont plus nécessaires dans ce fichier. Par exemple : webpack.NamedModulesPlugin, webpack.NoEmitOnErrorsPlugin, dont les fonctions webpack4 ont été configurées par défaut. En même temps, définissez le

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' }
}

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

推荐阅读：

使用mint-ui在手机端做出三级联动

怎样发布vue+todo-list应用

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!