webpack3 升级到 webpack4 小记

GopalFeng

发布于 2020-09-24 16:31:23

1K0

发布于 2020-09-24 16:31:23

背景

团队开发的时候，发现启动项目服务 npm run dev 很慢，我试了一下，要三四十秒，这对于我们开发来讲，会导致开发效率下降很多，而我们目前使用的是 webpack3，所以我想尝试通过升级 webpack 来提升一下编译打包的速度

注：代码大部分参照网络，可以在后面看到链接

调研

webpack3 升级到 webpack4 的话，还是做了很大的改动，我查询资料总结如下（当然不止以下改动）：

升级过程遇到的问题以及解决

问题一

Error: webpack.optimize.CommonsChunkPlugin has been removed, please useconfig.optimization.splitChunks instead.

解决方法：在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代，那么这两者有什么区别？为什么要废弃之前的，使用 splitChunks 的呢？

这里纸上谈兵一下

根据我查到的资料显示， CommonsChunkPlugin 存在以下的问题：

CommonsChunkPlugin 会提取一些我们不需要的代码
它在异步模块上效率低下
很难使用，配置也很难理解

相比， splitChunks 具有以下特点：

它不会打包不需要的模块
对异步模块有效（默认情况下是打开的）
更加容易使用和更加自动化

我们平时配置 CommonsChunkPlugin 如下：

new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
// 引入node_modules的依賴全抽出來
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, ‘../node_modules‘)
) === 0
)
}
// 或者直接minChunks: 2，重復模塊大於2的全部抽出來
})

平时使用 splitChunks 如下

optimization: {
splitChunks: {
// 抽離入口文件公共模塊為commmons模塊
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
}

问题二

Error: Plugin could not be registered at 'compile'. Hook was not found. BREAKING CHANGE:There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook,hook into 'this._pluginCompat'.

解决方法：这个问题是依赖版本的问题，将 webpack-dev-server 升级到 3.1.0 就可以解决了。

npm i webpack-dev-server@3.1.0 -D

问题三

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypointinstead

解决方法：这个是因为 webpack 4 不再支持 extract-css-chunks-webpack-plugin，我们可以使用 mini-css-extract-plugin 替代

-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
name: 'client',
target: 'web',
module: {
rules: [
{
test: /\.css$/,
- use: ExtractCssChunks.extract({
- use: 'css-loader'
- })
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ },
+ "css-loader"
+ ]
}
]
},
//
// other config........
//
plugins: [
- new ExtractCssChunks(),
+ new MiniCssExtractPlugin({
+ filename: `components/[name].css`
+ }),
//
// other config........
//
]

问题 4

Error: Chunk.initial was removed. Use canBeInitial/isOnlyInitial() at Chunk.get initial

解决方法：升级 "webpack-manifest-plugin": "^1.3.2" 到 "webpack-manifest-plugin": "^2.0.4"

问题 5

Error: webpack.optimize.UglifyJsPlugin has been removed, please useconfig.optimization.minimize instead.

解决方法： webpack 4 已经废除了之前 UglifyJsPlugin，用 optimization.minimize 替代

修改前：

plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false,
},
}),
]

修改后：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false,
},
}),
],
}

问题6

WARNING in configuration The 'mode' option has not been set, webpack will fallback to'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior.Learn more: https://webpack.js.org/concepts/mode/

解决方法：这是一个 warnning， webpack 4 一些默认的配置需要通过 mode 配置启用，这个配置项有三个配置值， development、 production 和 none，默认为 none，借用官网的一张图了解下它们的区别：