Webpack 5启用Terser属性混淆致Dev Server崩溃求助

核心原因 #

你开启了Terser的属性混淆（mangle.properties），但Webpack 5的Dev Server运行时依赖一些内部属性，这些属性被混淆后就会出现找不到的报错。和Webpack 3不同，现在Dev Server的逻辑已经整合到核心体系中，没有单独的webpack-dev-server.js文件可以引入规避。

具体修复步骤 #

1. 开发环境禁用属性混淆 #

既然报错出现在Dev Server环境（isInvokedInDevServer为true），直接在开发模式下关闭属性混淆即可，生产环境依然保留混淆逻辑：

mangle: {
    properties: {
        // 开发环境禁用属性混淆，生产环境自动启用
        enabled: !isInvokedInDevServer,
        keep_quoted: true,
        debug: isInvokedInDevServer,
        reserved: propertyMangleReserved, // this is an array
    },
    reserved: [
        "IntersectionObserver",
        "ResizeObserver"
    ]
},

2. 开发环境关闭整体代码压缩 #

开发模式下没必要开启代码压缩，既会拖慢编译速度，还容易触发这类混淆问题，直接关闭minimize：

optimization: {
    // 开发环境关闭压缩，生产环境开启
    minimize: !isInvokedInDevServer,
    minimizer: [
        new TerserPlugin({
            // ... 原有配置
        }),
        '...'
    ],
},

3. （可选）保留Dev Server相关属性 #

如果非要在开发环境开启属性混淆，需要把报错中出现的被混淆属性加入保留列表。比如你遇到的_$configureDefaultLogger$true_，要添加到propertyMangleReserved数组：

const propertyMangleReserved = [
    // 原有的保留属性...
    "_$configureDefaultLogger$true_"
];

不过这种方式需要持续排查新增的被混淆属性，效率远不如直接在开发环境禁用属性混淆。

验证方法 #

修改配置后重启Dev Server，编译仅包含console.log的单个JS文件，确认报错消失且功能正常运行。

内容的提问来源于stack exchange，提问作者Artek Wisniewski