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