terser-webpack-plugin压缩bundle报错：Invalid assignment求助

问题详情 #

• 报错信息：

  ERROR in bundle.js from Terser Invalid assignment bundle.js

• 使用的依赖版本：
  • terser-webpack-plugin: 4.2.3
  • webpack: ^4.33.0
  • clean-webpack-plugin: ^3.0.0
  • dotenv-webpack: ^1.7.0
  • React: 17.0.0
• 现象：跳过Terser执行yarn build可正常编译，启用Terser后触发错误，尝试更换库、修改配置未解决。

Webpack核心配置 #

const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { EnvironmentPlugin, ProgressPlugin } = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const modeConfig = (env, target) => require(`./build-utils/webpack.${env}`)(target);
const presetConfig = require('./build-utils/loadPresets');
const targetUtils = require('./build-utils/targetUtils');

module.exports = ({ mode, presets, target } = { mode: 'production', presets: [] }) => {
    return webpackMerge(
        {
            mode, // minify the code in production mode
            entry: './src/index.tsx',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: 'bundle.js',
            },
            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: 'tsconfig.build.json',
                        },
                    },
                ],
            },
            resolve: {
                extensions: ['.ts', '.tsx', '.json', '.js'],
                plugins: [new TsconfigPathsPlugin()],
            },
            plugins: [
                new CleanWebpackPlugin(),
                new Dotenv({ path: targetUtils.getEnvFile(target), systemvars: true }),
                new ProgressPlugin(),
                new HtmlWebpackPlugin({
                    template: path.resolve(rootDir, 'index.html'),
                    mode,
                }),

                new EnvironmentPlugin(process.env),
            ],
            externals: targetUtils.getExternals(target),
            node: {
                fs: 'empty',
            },
        },
        modeConfig(mode, target),
        presetConfig({ mode, presets }),
    );
};

Production模式下的Terser配置 #

const targetUtils = require('./targetUtils');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = target => ({
    optimization: {
        minimize: true,
        minimizer: [
            new TerserJSPlugin({
                extractComments: false,
                terserOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    },
    stats: {
        warnings: false,
    },
    resolve: {
        alias: targetUtils.getAlias(target),
    },
});

解决方法 #

1. 定位具体错误代码 #

Invalid assignment通常是代码中存在不符合规范的赋值语句（语法合法但压缩时触发检测），先通过source map定位问题：

• 在Webpack核心配置中添加devtool: 'source-map'
• 重新执行yarn build，Terser会输出更详细的错误位置，找到对应的代码进行修复。

2. 调整Terser压缩配置 #

关闭可能引发问题的不安全压缩选项，同时开启警告日志排查：

new TerserJSPlugin({
    extractComments: false,
    terserOptions: {
        compress: {
            drop_console: true,
            unsafe: false, // 关闭不安全压缩
            unsafe_assign: false // 禁止不安全赋值优化
        },
        warnings: true // 输出压缩过程中的警告
    },
})

3. 检查兼容性与版本匹配 #

尝试调整terser-webpack-plugin版本，确保与Webpack 4.x完全兼容：

• 降级到4.2.0或升级到4.3.0，执行yarn add terser-webpack-plugin@4.3.0 --dev

4. 排查第三方依赖问题 #

如果是第三方依赖代码导致的错误，先排除node_modules目录的压缩测试：

new TerserJSPlugin({
    exclude: /node_modules/, // 不压缩第三方依赖
    // 其他配置
})

若编译正常，逐步排查具体依赖，更新或替换存在问题的包。

5. 临时替换压缩插件 #

如果以上方法无效，可临时使用uglifyjs-webpack-plugin替代（仅Webpack 4.x兼容）：

• 安装：yarn add uglifyjs-webpack-plugin@2.2.0 --dev
• 修改配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 替换optimization.minimizer中的Terser配置
minimizer: [
    new UglifyJsPlugin({
        uglifyOptions: {
            compress: {
                drop_console: true,
            },
        },
    }),
]

内容的提问来源于stack exchange，提问作者Lorgio Roda