升级 webpack5 常见问题详解

webpack5 发布后，对打包速度，打包性能、tree shaking等都做了很多改进。对于一些老项目还在用 webpack4 或者webpack3 同学是一个巨大诱惑。但是对于升级后各种包冲突，包未更新，跟其它一个插件不兼容问题，让大家望而止步。下面来看看笔都在项目升级 webpack5 踩过的坑，做个详细的分享。

• webpack webpack-cli webpack-dev-server 的兼容性

"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.1.0",

[webpack-cli] ReferenceError: globalThis is not defined
at Object. (D:\webpack\vue-webpack-build\node_modules\memfs\lib\internal\errors.js:69:3)
at Module._compile (D:\webpack\vue-webpack-build\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (D:\webpack\vue-webpack-build\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object. (D:\webpack\vue-webpack-build\node_modules\memfs\lib\encoding.js:5:14)
at Module._compile (D:\webpack\vue-webpack-build\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (D:\webpack\vue-webpack-build\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)

由于笔者之前一直用的 node.js v10.15.3 。这个问题是 node 版本太低了

官网介绍 ：webpack-dev-server v4.0.0+ 要求 node >= v12.13.0、webpack >= v4.37.0（但是我们推荐使用 webpack >= v5.0.0）和 webpack-cli >= v4.7.0。

同时 devServer 的 contentBase 配置也变了，应该要设置 static.directory

老版本搭配建议：

webpack y5+、webpack-cli y4+、webpack-dev-server y3+

由于 webpack-cli4 改成通过 cli 调用 webpack-dev-server 启动项目

// scripts

"server": "webpack serve"

webpack y5+、webpack-cli y3+、webpack-dev-server y3+

// scripts

"server": "webpack-dev-server"

建议：大家还是有新版的，性能等都做了很大的优化。

• vue-loader@15.x

vue-loader 升级到 15+ 的时候，loader 配置就不光配置 rules 就行，还要配置 plugins

ERROR in ./src/components/Dynamic.vue?vue&type=style&index=0&id=76d8954a&lang=less&scoped=true& 18:0
Module parse failed: Unexpected token (18:0)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |

// vue-loader 14

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ]
  }
}

// vue-loader 15

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

• image-webpack-loader 使用报错

ERROR in ./src/assets/images/logo.png
Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: ‘D:\webpack\vue-webpack-build\node_modules\pngquant-bin\vendor\pngquant.exe’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
at notFoundError (D:\webpack\vue-webpack-build\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (D:\webpack\vue-webpack-build\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (D:\webpack\vue-webpack-build\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
@ ./node_modules/thread-loader/dist/cjs.js??clonedRuleSet-1[0].rules[0].use[0]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-1[0].rules[0].use[1]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Hello.vue?vue&type=script&lang=js& 19:0-44 26:12-16
@ ./src/components/Hello.vue?vue&type=script&lang=js& 1:0-282 1:298-301 1:303-582 1:303-582
@ ./src/components/Hello.vue 2:0-57 3:0-52 3:0-52 10:2-8
@ ./src/main.js 3:0-43 8:13-18

这是由于 image-webpack-loader 包安装不完整造成的，通过 cnpm install –save-dev  image-webpack-loader 安装就解决了。

• webpack 开发模式不能使用 MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader 是用来提取css样式到css文件中并压缩，但是开发环境启动 webpack devServer 引用的文件都不是打包在dist目录的，是打包到内存中引用的，所以提取的css没有文件来容纳它

• extract-text-webpack-plugin 兼容问题

[webpack-cli] TypeError：compiler.plugin is not a function

原因是：webpack4以上的版本不再使用“extract-text-webpack-plugin”，应该改成用“mini-css-extract-plugin”