升级webpack 5实战
升级webpack 5实战
一、背景
本次对公司项目进行webpack的升级 ， 原有版本是webpack4.42.1， 本次升级目标是webpack5.28.0，已经是很新的版本了。目标，升级Webpack5，应用长效缓存，提升构建速度。
二、步骤
按照官网升级文档
“vue-loader”: “^15.9.6”,
“terser-webpack-plugin”: “^5.1.1”,
“style-loader”: “^2.0.0”,
“mini-css-extract-plugin”: “^1.4.0”,
“less-loader”: “^8.0.0”,
“html-webpack-plugin”: “^5.3.1”,
“file-loader”: “^6.2.0”,
“css-loader”: “^5.2.0”,
“compression-webpack-plugin”: “^7.1.2”,
“babel-loader”: “^8.2.2”,
“postcss-loader”: “^5.2.0”,
原有运行命令
“dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”,
wbepack4X版本使用webpack-dev-server，启动方式为：webpack-dev-server。
webpack5X修改为：webpack server
webpack、webpack-cli、webpack-dev-server是需要版本匹配的
原有匹配版本
“webpack”: “^4.42.1”,
“webpack-cli”: “^3.3.11”,
“webpack-dev-server”: “^3.10.3”,
升级版本
“webpack”: “^5.28.0”,
“webpack-cli”: “^4.6.0”,
“webpack-dev-server”: “^3.11.2”,
运行报错：webpack.NamedModulesPlugin is not a constructor
原有配置文件
plugins: [
new webpack.NamedModulesPlugin(),
],
改成用配置的方式即可
optimization: {
namedModules: true
},
查看文档发布 optimization.namedModules removed (NamedModulesPlugin too) 已经被移除了。
同时在 webpack4 上是默认设置，所以不需要设置这个选项即可。
webpack.HashedModuleIdsPlugin is not a constructor
报错去除
不兼容
报错弃用
new webpack.NamedModulesPlugin()
不兼容
报错弃用
new TerserPlugin(),
new HtmlWebpackPlugin({
chunksSortMode: ‘dependency’
}),
报错，新版只支持 ‘none’ | ‘auto’ | ‘manual’
改为
new HtmlWebpackPlugin({
chunksSortMode: ‘manual’
}),
webpack5已内置
TerserPlugin去除
devServer去除了很多旧的配置项目
实际上出错信息已经说明了问题原因：
Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
这一段的意思是webpack.config.js错误，原因是这个配置文件的版本和我们当前安装的webpack的版本不匹配。
- configuration has an unknown property ‘disableHostCheck’.
然后逐步排查，去掉当前安装的webpack版本已经去掉的配置项目。
mode: process.env.NODE_ENV || ‘production’,
必须配置mode
webpack5移除了node环境的polyfill
需要配置fallback
resolve: {
fallback: {
crypto: false
}
},
configuration.node不兼容
去除了node属性
node: {}
增加属性
optimization: {
chunkIds: “deterministic”,
moduleIds: “deterministic”,
mangleExports: “deterministic”
},
target: [‘web’, ‘es5’],
// 5特有的文件监听
watchOptions: {
//默认为空，不监听的⽂件或者⽬录，⽀持正则
ignored: /node_modules/,
//监听到⽂件变化后，等300ms再去执⾏，默认300ms,
aggregateTimeout: 300,
poll: config.dev.poll,
},
// 5新增性能优化
performance: {
maxEntrypointSize: 4000000, // 入口起点的最大体积，控制 webpack 何时生成性能提示
maxAssetSize: 1000000, //单个资源体积(单位: bytes)，控制 webpack 何时生成性能提示
},
file-loader和url-loader删除
url-loader弃用， 使用 asset modules 代替
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
- asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
- asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
在项目中url-loader改用 type: ‘asset/resource’的形式
当 webpack 配置中使用了 [hash] 占位符时，请考虑将它改为 [contenthash]。效果一致，但事实证明会更为有效。
三、总结
本次升级已经完成，在性能上，Webpack5除了未修改重编译，其他上表现并不如之前V4的性能好。在未来的工作上，我会继续关注这里性能为什么不如V4。
下面的脚手架是基于@vue/cli 4.5.8 版本构建，已将webpack3.6.0升级到5.28.0，可以直接下载使用。
喜欢的给个star吧
