为何Webpack在DEBUG为false时仍引入未调用的调试模块代码？

环境 #

• Webpack版本：webpack@5.88.2

关键配置代码 #

我的Webpack配置中通过DefinePlugin定义了环境变量：

module.exports = env => {
    const PROD = env.production;
    const mode = env.mode || (PROD ? 'production' : 'development');

    const plugins = [
        new LicenseCheckerWebpackPlugin(...),
        new CleanWebpackPlugin(...),
        new webpack.BannerPlugin(...),
        new CopyWebpackPlugin(...),
        new MiniCssExtractPlugin(...),
        new webpack.ProvidePlugin(...),
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(!PROD),
        }),
        new webpack.NormalModuleReplacementPlugin(...),
        new VueLoaderPlugin(),
        new ESLintPlugin(...),
    ];

    return {
        mode,
        performance: {...},
        entry: {...},
        output: {...},
        optimization: {
            minimize: mode === 'production',
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: true,
                        },
                        output: {
                            ascii_only: true,
                        },
                    },
                }),
                new CssMinimizerPlugin(),
            ],
        },
        stats: 'minimal',
        watchOptions: { aggregateTimeout: 200 },
        devtool: mode === 'production' ? false : 'inline-source-map',
        resolve: {...},
        module: {
            rules: [...],
        },
        plugins,
    };
};

业务代码 #

import { MyDebugModule } from './my-debug-module';

if (DEBUG) {
    MyDebugModule();
}

问题现象 #

当DEBUG被解析为false时：

• 打包产物中已经没有MyDebugModule()的调用语句
• 但my-debug-module.js中的代码依然被包含在最终打包文件里
• 只有完全删除整个if (DEBUG) { MyDebugModule(); }代码块，Webpack才会彻底移除该模块的代码

错误判断复盘 #

之前误以为sideEffects配置不会对这个导入模块产生影响，现在证实这个判断是错误的。

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