共计 789 个字符，预计需要花费 2 分钟才能阅读完成。
遇到的坑
webpack 一定要锁版本，这东西的版本感觉以一个大坑，说不定这个版本支持，下个版本就不支持了，只能是在 issue 里看到别人提 pr，然后说下个版本修复，尴尬的要死
MiniCssExtractPlugin 得放在 vue-style-loader 后面
如果是 ssr 项目，babel 升级的影响会比较大，其他都可以升级，babel 要慎重
涉及依赖升级
webpackwebpack-cliwebpack-dev-servermini-css-extract-pluginhtml-webpack-pluginbabel (且升且珍惜)
步骤
添加 mode, 区分开发和生产，开发编译速度快，生产打包体积小
删除 extract-text-webpack-plugin(webpack4 不推荐)，添加 mini-css-extract-plugin 依赖或升级 extract-text-webpack-plugin 版本
if(process.env.NODE_ENV === ‘production’) {
return [‘vue-style-loader’, MiniCssExtractPlugin.loader
].concat(loaders);
}
return [‘vue-style-loader’].concat(loaders)
3. 删除 CommonsChunkPlugin(webpack4 弃用)，添加 splitChunks
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
vendor: {
chunks: “all”,
test: /[\\/]node_modules[\\/]/,
name: “vendor”,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 98
}
}
}
},
至此，旧项目升级就完成了
