migration et mise à niveau webpack3.x

Cette fois, je vais vous présenter la migration et la mise à niveau de webpack3.x. Quelles sont les précautions à prendre pour la migration et la mise à niveau de webpack3.x. Ce qui suit est un cas pratique, jetons un coup d'œil.

Digression : Ne regardez pas la configuration 0 car elle est très gadget et ne peut fondamentalement pas répondre aux besoins de la plupart des utilisateurs. Cependant, l'ajout de configurations par défaut supplémentaires la rend plus pratique pour les utilisateurs. La configuration est relativement simple. et c'est une méthode prête à l'emploi. Après tout, la configuration 0 de parcelle a vraiment volé une grande partie de la vedette à webpack auparavant, puis j'ai également travaillé sur un simple projet de modèle de parcelle en utilisant parcelle+vue. Si vous êtes intéressé, vous pouvez y jeter un œil.

1. Nouvelles choses dans webpack4

0. Installation

Ne vous contentez plus d'installerwebpackwebpack-cli

🎜 >Ça y est, vous devez également installer un

:

sudo npm install -g webpack webpack-cli

Installation globale

npm install --save-dev webpack webpack-cli

Installation partielle (dossier courant)

1. 0 Configuration

'./src/' './dist'L'entrée par défaut est

et la sortie par défaut est

 ; les paramètres de compression (optimisation.minimize) sont activés par défaut pendant la production et pendant la fermeture du développement.

La configuration par défaut ne se limite pas aux deux éléments ci-dessus.

2. Paramètre mode/--mode

Le paramètre mode/--mode est ajouté pour indiquer s'il s'agit du mode développement ou production a deux valeurs facultatives : développement Et production, la production ne prend pas en charge la surveillance, la production se concentre sur la taille du fichier emballé et le développement se concentre sur la vitesse de construction.

webpack --mode development

peut également être configuré dans le fichier de configuration :

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. Mettre à niveau uglifyjs

Créé dans l'échafaudage de vue précédent Pour projets basés sur webpack, vous pouvez clairement voir cette ligne dans la configuration dans webpack.prod.conf.js :

// UglifyJs ne supporte pas ES6+, vous pouvez également utiliser babel-minify pour un meilleur treeshaking : https :/ /github.com/babel/minify

Dans webpack4.0, le code es6 peut déjà être compressé, comme :

class user {
 getUsername() {
  // to do
 }
}

Après compression, il s'agit de :

4. Pour supprimer les chargeurs, vous devez utiliser des règles

La version précédente des chargeurs est toujours conservée dans webpack3.x et peut être utilisés avec les règles. Les chargeurs ont été complètement supprimés dans la nouvelle version et les règles doivent être utilisées.

5. sideEffects

Ajoutez sideEffects:false dans le package.js du module Lorsque vous utilisez l'exportation pour exporter séparément, les autres fichiers autres que l'exportation ne seront pas empaquetés. ce qui rend le fichier packagé plus petit.

Liens connexes : https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4 prend en charge plusieurs formes de types de modules, mais parfois, vous devrez peut-être ajouter un type pour correspondre

S'il s'agit de trois types de modules CommonJS, AMD, ESM, utilisez javascript/auto

S'il s'agit de modules EcmaScript (.mjs ; ), utilisez javascript/esm, les autres types de modules ne prendront pas effet

Si seuls les modules CommonJS et EcmaScript ne sont pas disponibles, utilisez javascript/dynamic

S'il s'agit d'un fichier de type json, son utilisation est autorisée. Pour importer json avec require et import, utilisez json ;

S'il s'agit de Webassembly, utilisez webassembly/experimental - c'est officiellement une fonctionnalité expérimentale.

Par exemple :

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. Prend en charge l'importation ES6 de fichiers JSON et peut filtrer le code inutile

Voici trois méthodes de importation de fichiers json :

let jsonData = require('./data.json');
import jsonData from './data.json'
import { first } from './data.json'

Le fichier json introduit en utilisant import { first } from './data.json' ignorera le code non importé, et seul le premier sera saisi lors de l'empaquetage.

8. Supprimez CommonsChunkPlugin et remplacez-le par optimisation.splitChunks et optimisation.runtimeChunk

Il y a beaucoup de contenu ici, je ne le présenterai donc pas en détail . Il peut y avoir un article de suivi. Des articles sur l'optimisation.splitChunks seront brièvement présentés ci-dessous lors de la migration depuis 3.x. En plus du lien de nouvelle version ci-dessus, voici quelques bons liens recommandés :

. RIP CommonsChunkPlugin
Article sur la suppression de CommonsChunkPlugin sur support
Article sur la mise à jour webpack4 sur support

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时，对应的许多依赖也需要相应的进行升级，下面是在vuec-cli的脚手架中需要的更新；对于其他工程，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next <br>…

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子：

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举，选了几个相对关键的点，具体可以去看这里；有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。

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

推荐阅读：

vue+update()使用详解

具体分析webpack样式加载

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!