如何阻止Webpack的babel-loader在生产模式下压缩类名？

生产模式下类名被压缩混淆，主要是Webpack默认的代码压缩工具（TerserPlugin）导致的，同时需要确保Babel相关配置不会篡改类名，具体调整步骤如下：

1. 调整Babel配置 #

如果你的Babel预设或插件涉及类处理，需要明确让它们保留类名：
修改你现有webpack.config.js里的babel-loader配置：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: { 
        loader: "babel-loader",
        options: {
            presets: [
                ["@babel/preset-env", { 
                    "targets": "last 1 chrome version",
                    "keepClassNames": true // 让preset-env保留类名
                }]
            ],
            plugins: [
                ["@babel/plugin-proposal-class-properties", { "loose": false }],
                ["@babel/plugin-proposal-private-methods", { "loose": false }]
            ]
        }
    }
}

若你单独引入了@babel/plugin-transform-classes插件，需给该插件添加keepClassNames: true配置。

2. 配置Webpack的Terser压缩工具 #

生产模式下Webpack默认用TerserPlugin压缩代码，必须修改其配置来保留类名：
在webpack.config.js中添加optimization配置：

module.exports = {
    // 你的其他配置项...
    mode: 'production',
    optimization: {
        minimizer: [
            new require('terser-webpack-plugin')({
                terserOptions: {
                    keep_classnames: true, // 强制保留类名
                    keep_fnames: true, // 保留函数名（若类方法名也不想被混淆则开启）
                    mangle: {
                        keep_classnames: true,
                        keep_fnames: true
                    }
                }
            })
        ]
    }
};

Webpack 5及以上版本直接按此配置即可，覆盖默认的Terser配置后，生产构建时类名就不会被压缩混淆了。

内容的提问来源于stack exchange，提问作者Andrew Bullock