🏗️
webpack4升级webpack5
webpack
Monday, April 24, 2023
更新所有webpack相关依赖
webpack webpack-cli webpack-dev-server webpack-merge
webpack-merge 引入方式不一样
javascript
// webpack4
const merge = require('webpack-merge')
//webpack5
const {merge} = require('webpack-merge')替换extract-text-webpack-plugin ❌ 为mini-css-extract-plugin用来提取css
更新html-webpack-plugin版本
移除clean-webpack-plugin ❌, webpack5自带. 开启方式:
javascript
output: {
clean: true,
},出现
javascript
DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)更换我们的hash
javascript
// before
filename: path.join('static', project.version, "[name][hash].bundle.js")
// after
filename: path.join('static', project.version, "[name][chunkhash].bundle.js")打包后会出现.js.LICENSE.txt文件
javascript
// 设置extractComments 为 falas
minimizer: [
new TerserPlugin({
extractComments: false
})
]devtool变得更加严格
javascript
// before 4
devtool: 'cheap-module-eval-source-map'
after 5
devtool: 'eval-cheap-module-source-map'javascript
// before
devServer: {
historyApiFallback: true,
disableHostCheck: true,
contentBase: './'
}
after
devServer: {
historyApiFallback: true,
allowedHosts: "all",
static: './'
},不再使用happypack ❌
webpack5 就不要再使用 happypack 了，官方也已经不再维护了
可以使用thread-loader
通过 thread-loader
将耗时的 loader 放在一个独立的 worker 池中运行，加快 loader 构建速度。
项目中不使用symlinks
symlinks（例如 npm link 或者 yarn link），可以设置 resolve.symlinks: false，减少解析工作量。
不需要dll ❌
webpack5 开箱即用的持久缓存是比 dll 更优
cache
通过配置 webpack 持久化缓存 cache: filesystem，来缓存生成的 webpack 模块和 chunk，改善构建速度。
简单来说，通过 cache: filesystem 可以将构建过程的 webpack 模板进行缓存，大幅提升二次构建速度、打包速度，当构建突然中断，二次进行构建时，可以直接从缓存中拉取，可提速 90% 左右。
对比
升级优化前
升级优化后
使用缓存第一次构建
使用缓存
当第一次构建时: 构建时间提升了 大约 73%左右
使用缓存时: 构建时间提升了96%