1. 升级 webpack 和 webpack-cli
1.1 升级 webpack 4 至最新的可用版本。
当使用 webpack >= 4 时，升级到最新的 webpack 5 版本无需额外的操作；
如果你使用的 webpack 版本小于 4，请查阅 webpack 4 迁移指南。
npm install webpack@latest -D
1.2 升级 webpack-cli 到最新的可用版本（如使用 webpack-cli）
cnpm install webpack-cli@latest -D
2. 升级所有使用到的 plugin 和 loader 为最新的可用版本。
部分 plugin 和 loader 可能会有一个 beta 版本，必须使用它们才能与 webpack 5 兼容。
2.1 webpack-dev-server
cnpm install webpack-dev-server@latest -D
报错 Error: Cannot find module 'webpack-cli/bin/config-yargs.
使用 webpack serve 启动即可解决
package.json
"scripts": {
- "start": "webpack-dev-server --config config/webpack.dev.js",
+ "start": "webpack serve --config config/webpack.dev.js",
}
参考资料
- https://github.com/webpack/webpack-dev-server/issues/2759
- https://webpack.docschina.org/guides/production/#setup
报错 webpack.NamedModulesPlugin is not a construct.
config.plugins
[
new HtmlWebpackPlugin({
filename: 'index.html',
template: `public/templates/${template}.html`,
chunks: [`${themeName}`],
}),
- new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin({}),
]
config.optimization
optimization: {
+ moduleIds: 'named',
}
参考资料
- https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure
- https://webpack.docschina.org/configuration/optimization/#optimizationmoduleids
2.2 webpack-merge
npm install webpack-merge@latest -D
导入方式改动下
- const merge = require('webpack-merge')
+ const { merge } = require('webpack-merge')
2.3 HTML Webpack Plugin
报错 Cannot add property htmlWebpackPluginAlterChunks, object is not extensible.
升级到最新版本即可解决
npm install html-webpack-plugin@latest -D
参考资料