该篇仅针对整体的升级，具体细微的踩坑经历将在同个专栏继续更新
webpack升级
核心步骤
- 升级webpack：
npm install webpack@latest - 升级webpack-cli：
npm install webpack-cli@latest
插件相关
- 升级mini-css-extract-plugin：
npm install mini-css-extract-plugin@latest - 升级html-webpack-plugin：
npm install html-webpack-plugin@latest - IgnorePlugin语法修改
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment/,
})
其他
- 开启持久化缓存：手动开启才能生成webpack5缓存目录提升打包速度
cache: {
type: 'filesystem',
}
- node.js相关polyfill：webpack5已移除，需进行手动引入
resolve: {
fallback: {
"path": require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
}
}
- 严格devtool写法：
^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
vue-cli升级
核心步骤
- 升级vue/cli-service：
npm install @vue/cli-service@latest（底层webpack5） - 升级webpack：
npm install webpack@latest（webpack版本与vue-cli版本一致）
其他
- 开启持久化缓存：手动开启才能生成webpack5缓存目录提升打包速度
cache: {
type: 'filesystem',
}
- node.js相关polyfill：webpack5已移除，需进行手动引入
resolve: {
fallback: {
"path": require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
}
}
- IgnorePlugin语法修改
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment/,
})