webpack最新版本已经升级到V5,V5版本有着不小的改动点。
官方也提供了迁移指南 webpack.docschina.org/migrate/5/ 。
下面是一些常见的注意点:
1. 需要注意webpack版本和webpack-cli 的版本冲突
webpack-cli 和 webpack 都同步升级到最新版本。不同版本可能导致兼容性报错!
2. v4 的 hash这里改为v5的 contenthash
所有配置里面的hash都改为 contenthash。
output: {
...
// 此选项决定了每个输出 bundle 的名称
filename: DEV_ENV ? '[name].js' : assetsPath('js/[name].[contenthash].js'),
// 此选项决定了非初始 chunk 文件的名称
chunkFilename: DEV_ENV ? '[name].js' : assetsPath('js/[name].[id].[contenthash].js'),
...
}
3.url-loader 不需要了! 用内置的asset!
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
// use: [
// {
// loader: 'url-loader',
// options: {
// limit: 8192,
// name: assetsPath('img/[name].[contenthash].[ext]')
// // esModule: false
// }
// }
// ]
type: 'asset',
generator: {
filename : assetsPath('img/[hash][ext][query]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
// loader: 'url-loader',
// options: {
// limit: 10000,
// name: assetsPath('fonts/[name].[contenthash].[ext]')
// }
type: 'asset',
generator: {
filename : assetsPath('fonts/[hash][ext][query]')
}
}
]
}
4. v5 没有内置polyfill 的兼容处理
// 别名配置
resolve: {
// v5 对crypto 没有polyfill 的兼容处理
fallback: {
crypto: require.resolve('crypto-browserify'),
path: require.resolve('path-browserify'),
url: require.resolve('url'),
buffer: require.resolve('buffer/'),
util: require.resolve('util/'),
stream: require.resolve('stream-browserify/')
}
}
5. 添加自动导入模块
plugins: [
// 自动导入模块 在全局 代替用import
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"]
})
],
6. splitChunks一般情况用默认的即可
optimization: {
splitChunks: {
chunks: 'all'
}
}
7. "html-webpack-plugin": "^5.5.0"
这个插件也要更新到v5+
这个 chunksSortMode: 'auto' 选项需要注意
8. @babel/runtime 包需要安装到最新版
9. prd配置中 // devtool: 'none' 需要注释掉
10. 升级相关loader到最新版本
ts-loader\css-loader\postcss-loader\sass-loader\style-loader
11. 用 css-minimizer-webpack-plugin 替换 optimize-css-assets-webpack-plugin
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
`...`,
new CssMinimizerPlugin()
]
}