webpack4 升级到 5

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

参考资料

• https://www.npmjs.com/package/html-webpack-plugin