需求

之前做老项目迭代的时候，由于要修改很多配置文件，所以这里就统一记录下我在项目中对webpack5的一些额外的配置

思路

由于使用的是webpack5，然后听说webpack5中内置了swc模块，所以就照着swc官网配置了一下，效果还行，整体配置文件思路如下

入口
输出
解析
模块
插件
压缩
dev

下面只讲一些重点环节,一些常见的开发配置这里就不过多描述了

模块

一般在这里处理一些文件，配置loader，或者配置插件

常见的文件配置如下：

                    {
                        test: /\.css$/,
                        use: [
                            isPro ? MiniCssExtractPlugin.loader : 'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        auto: /[\\/]src[\\/]|[\\/]公共class名称[\\/]/
                                    }
                                }
                            },
                            'postcss-loader'
                        ]
                    },
                    {
                        test: /\.less$/,
                        use: [
                            isPro ? MiniCssExtractPlugin.loader : 'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        auto: /[\\/]src[\\/]|[\\/]公共class名称[\\/]/
                                    }
                                }
                            },
                            'postcss-loader',
                            {
                                loader: 'less-loader',
                                options: {
                                    lessOptions: {
                                        javascriptEnabled: true
                                    }
                                }
                            }
                        ]
                    },
                    {
                        test: /\.jsx?$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: ['@babel/preset-react', '@babel/preset-env'],
                                    plugins: [
                                        '@babel/plugin-transform-runtime',
                                        !isPro && 'react-refresh/babel'//配置热更新
                                    ].filter(Boolean)
                                }
                            }
                        ]
                    },
                    {
                        test: /\.(png|jpg|gif|svg)$/,
                        type: 'asset',
                        parser: {
                            dataUrlCondition: {
                                maxSize: 30 * 1024 // 多大转为bese64
                            }
                        },
                        generator: {
                            filename: 'static/images/[hash][ext][query]'
                        }
                    },
                    {
                        test: /\.(eot|ttf|woff|woff2)$/,
                        type: 'asset/resource',
                        generator: {
                            filename: 'static/other/[hash][ext]'
                        }
                    }

插件

由于用的是antd，所以需要配置官方的主题插件，还有一些常见的插件如下：

HtmlWebpackPlugin：用于生成htnl文件，为了方便插入一些sdk以及cdn源配置
MiniCssExtractPlugin： css压缩配置，配置
CopyPlugin：复制公共文件插件
ReactRefreshWebpackPlugin：热更

new AntDesignThemePlugin(themeOption),
        new Webpackbar(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html')
        }),
        new MiniCssExtractPlugin({//提取css到外部文件
            filename: 'css/[name].css',
            chunkFilename: 'css/[contenthash].chunk.css'
        }),
        new CopyPlugin({
            patterns: [{ from: 'public', to: 'public' }]
        }),
        new webpack.DefinePlugin({//项目中用到node变量，需要配置
            // 定义全局变量
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        !isPro && new ReactRefreshWebpackPlugin()//热更新

DefinePlugin是用来设置一些变量的，一般会配置一些node变量，根据自己的项目进行适配，例如配置网关

压缩

一般的webpack项目都会使用TerserPlugin插件进行压缩，有一些参数是需要自己去配的

optimization: {
        minimizer: [
            new CssMinimizerPlugin(),//压缩css
            new TerserPlugin({//压缩js
                minify: TerserPlugin.swcMinify, // 启动swc
                terserOptions: {
                    format: {
                        braces: true, // 优化循环上下文
                        comments: false//去注释
                    },
                    compress: {
                        // booleans: true, // 对布尔类型上下文的各种优化
                        // arguments: true, // 函数名替换arguments
                        drop_console: true//去console.log
                    },
                    keep_classnames: true, // 防止类名被外部修改
                },
                // extractComments: false //不提取注释到单独文件 // swc模式下会默认删除所有注释
            })
        ], //如果设置了css压缩，会覆盖默认压缩器，需要增加new TerserPlugin()
        splitChunks: {//代码分割
            chunks: 'all',
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: 'js/vender/[contenthash].vender.js',
                },
            }
        },
        usedExports: true,
    },

如果是C端项目，则需要额外配置cdn源以及图片压缩插件，B端因为业务会比较多，所以最好开启swc来帮助编译，当然用原生也是可以的，swc的编译能快个30%左右的速度，根据项目自行选择即可

Webpack5文件配置说明

需求

思路

模块

插件

压缩