好处：提高打包速度。 亲测run build时间从 18s -> 16s

打包工具对业务代码本身无影响，理论是越先进越好

1. package.json 的依赖升级

以下几个包最好都升级到最新版本

  1. {
  2.     "vue-loader": "^15.9.6",
  3.     "webpack": "^5.26.0",
  4.     "webpack-cli": "^4.5.0",
  5.     "webpack-dev-server": "^3.11.2",
  6.     "terser-webpack-plugin": "^5.1.1",
  7.     "html-webpack-plugin": "^5.3.1",
  8. }

启动方式改变

  1. "scripts": {
  2.     // 旧的
  3.     "dev": "webpack-dev-server --open --hot --env.NODE_ENV=development --progress --mode=development",
  4.     "build": "webpack --inline --env.NODE_ENV=production --progress  --mode=production --hide-modules",
  6.     // 换成新的
  7.     "dev": "webpack serve --open --hot --progress --mode=development",
  8.     "build": "webpack --progress --mode=production",
  9. }

2. webpack.config.js 环境变量变了

  1. // 旧的
  2. module.exports = (env) => {
  3. }
  5. // 新的, 增加一个argv参数,  然后webpack.config.js内全局替换:  env.NODE_ENV -> argv.mode
  6. module.exports = (env, argv) => {
  7. }

3. 增加 target: ‘web’ 否则无法热更新

  1. {
  2.     target: 'web', // 在 entry和output 同级位置添加这一行
  3.     entry: './src/main.js',
  4.     output: {},
  5.     ...
  6. }

4. 报错: Compiling RuleSet failed: A Rule must not have a ‘options’ property when it has a ‘use’ property

在 Webpack 最新版本中，rules 属性中的配置，可以有 test、exclude、use、include 等字段，但不允许有 options 了；如果需要，可以写成下面这样：

  1. module: {
  2.     rules: [
  3.         // 旧写法（报错）
  4.         {
  5.           test: /\.js$/,
  6.           include: /src/,
  7.           loader: 'babel-loader',
  8.           options: {
  9.             cacheDirectory: true
  10.           }
  11.         },
  12.         // 新写法
  13.         {
  14.           test: /\.js$/,
  15.           include: /src/,
  16.           use: {
  17.             loader: 'babel-loader',
  18.             options: {
  19.               cacheDirectory: true
  20.             }
  21.           }
  22.         },
  24.         // 旧写法
  25.         {
  26.           test: /\.(png|jpg|gif)$/,
  27.           loaders: [
  28.             'url-loader?limit=30720&name=img/[name].[ext]'
  29.           ]
  30.         },
  31.         // 新写法
  32.         {
  33.           test: /\.(png|jpg|gif)$/,
  34.           use: [
  35.             'url-loader?limit=30720&name=img/[name].[ext]'
  36.           ]
  37.         },
  38.     ]
  39. }

5. 报错: TypeError: Cannot read property ‘PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE’ of undefined

speed-measure-webpack-plugin 这个插件不能在用了 ┭┮﹏┭┮

跟此插件有关的代码都要注释掉

需要监控打包时间的话：可以用progress-bar-webpack-plugin

（原创整理，有疑问可以私信。如果有用，谢谢点赞~）