This article only focuses on the overall upgrade. The specific and subtle pitfall experiences will be continued to be updated in the same column.
webpack upgrade
core steps
- Upgrade webpack:
npm install webpack@latest - Upgrade webpack-cli:
npm install webpack-cli@latest
Plug-in related
- Upgrade mini-css-extract-plugin:
npm install mini-css-extract-plugin@latest - Upgrade html-webpack-plugin:
npm install html-webpack-plugin@latest - IgnorePlugin syntax modification
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment/,
})
other
- Turn on persistent cache: manually turn it on to generate a webpack5 cache directory to improve packaging speed.
cache: {
type: 'filesystem',
}
- Node.js related polyfill: webpack5 has been removed and needs to be introduced manually
resolve: {
fallback: {
"path": require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
}
}
- Strict devtool writing:
^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
vue-cli upgrade
core steps
- Upgrade vue/cli-service:
npm install @vue/cli-service@latest(underlying webpack5) - Upgrade webpack:
npm install webpack@latest(the webpack version is consistent with the vue-cli version)
other
- Turn on persistent cache: manually turn it on to generate a webpack5 cache directory to improve packaging speed.
cache: {
type: 'filesystem',
}
- Node.js related polyfill: webpack5 has been removed and needs to be introduced manually
resolve: {
fallback: {
"path": require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
}
}
- IgnorePlugin syntax modification
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment/,
})