升级到Webpack5的常用注意事项、改造点

1,153 阅读1分钟

webpack最新版本已经升级到V5,V5版本有着不小的改动点。

官方也提供了迁移指南 webpack.docschina.org/migrate/5/

下面是一些常见的注意点:

1. 需要注意webpack版本和webpack-cli 的版本冲突

image.png

webpack-cli 和 webpack 都同步升级到最新版本。不同版本可能导致兼容性报错!

2. v4 的 hash这里改为v5的 contenthash

所有配置里面的hash都改为 contenthash。

output: {
...
 // 此选项决定了每个输出 bundle 的名称
filename: DEV_ENV ? '[name].js' : assetsPath('js/[name].[contenthash].js'),
// 此选项决定了非初始 chunk 文件的名称
chunkFilename: DEV_ENV ? '[name].js' : assetsPath('js/[name].[id].[contenthash].js'),
...
}

3.url-loader 不需要了! 用内置的asset!

module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg)$/,
            // use: [
            //     {
            //         loader: 'url-loader',
            //         options: {
            //             limit: 8192,
            //             name: assetsPath('img/[name].[contenthash].[ext]')
            //             // esModule: false
            //         }
            //     }
            // ]
            type: 'asset',
            generator: {
                filename : assetsPath('img/[hash][ext][query]')
            }
        },
        {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                // loader: 'url-loader',
                // options: {
                //     limit: 10000,
                //     name: assetsPath('fonts/[name].[contenthash].[ext]')
                // }
                type: 'asset',
                generator: {
                    filename : assetsPath('fonts/[hash][ext][query]')
                }
            }
    ]
 }

4. v5 没有内置polyfill 的兼容处理

// 别名配置
    resolve: {
        //  v5 对crypto 没有polyfill 的兼容处理
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            path: require.resolve('path-browserify'),
            url: require.resolve('url'),
            buffer: require.resolve('buffer/'),
            util: require.resolve('util/'),
            stream: require.resolve('stream-browserify/')
        }
    }

5. 添加自动导入模块

plugins: [
        // 自动导入模块 在全局 代替用import
        new webpack.ProvidePlugin({
            Buffer: ["buffer", "Buffer"]
        })
    ],

6. splitChunks一般情况用默认的即可

optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }

7. "html-webpack-plugin": "^5.5.0"

这个插件也要更新到v5+

这个 chunksSortMode: 'auto' 选项需要注意

8. @babel/runtime 包需要安装到最新版

9. prd配置中 // devtool: 'none' 需要注释掉

10. 升级相关loader到最新版本

ts-loader\css-loader\postcss-loader\sass-loader\style-loader

11. 用 css-minimizer-webpack-plugin 替换 optimize-css-assets-webpack-plugin

optimization: {

        minimizer: [

            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line

            `...`,

            new CssMinimizerPlugin()

        ]

    }