Webpack 在 DEBUG 为 false 时仍打包 my-debug-module.js，根本原因在于模块被标记为具有副作用（sideEffects: true），导致 Tree Shaking 无法安全移除该模块，即使其唯一调用被条件逻辑排除。
webpack 在 `debug` 为 `false` 时仍打包 `my-debug-module.js`，根本原因在于模块被标记为具有副作用（`sideeffects: true`），导致 tree shaking 无法安全移除该模块，即使其唯一调用被条件逻辑排除。
在 Webpack 中，Tree Shaking 的前提不仅是“未被引用”，更关键的是模块必须被明确声明为 无副作用（side-effect-free）。你代码中虽有 if (DEBUG) { MyDebugModule(); } 这样的条件分支，且 DEBUG 在生产环境被 DefinePlugin 替换为 false，但 Webpack 仍保留了 my-debug-module.js 的整个模块——这是因为 Webpack 默认将所有模块视为可能含有副作用（如执行全局赋值、修改原型、发起请求、触发 console 输出等），除非你主动通过 package.json 中的 "sideEffects" 字段或 module.rules 中的 sideEffects 选项显式声明其安全性。
例如，若 my-debug-module.js 内容如下：
// my-debug-module.js
console.log('Debug module loaded'); // 副作用：I/O 操作
export function MyDebugModule() {
debugger;
}即使 MyDebugModule() 从未被调用，console.log 这一行本身就在模块顶层执行，构成副作用。此时，即使 DEBUG === false，Webpack 也不敢删除该模块，因为删除会导致行为变化（丢失日志输出）。
✅ 正确解决方案分两步：
立即学习“Java免费学习笔记（深入）”；
- 确保模块真正无副作用：重写 my-debug-module.js，避免任何顶层副作用：
// ✅ 安全的 my-debug-module.js（无顶层副作用）
export function MyDebugModule() {
console.log('Debug mode active');
debugger;
}
// 注意：不执行任何语句，仅导出函数- 显式声明 sideEffects: false（推荐方式）：
在 my-debug-module 所在包的 package.json 中添加：
{
"name": "my-debug-module",
"sideEffects": false
}或若该模块位于项目源码中（如 src/utils/my-debug-module.js），可在 webpack.config.js 的 module.rules 中单独配置：
module: {
rules: [
{
test: /\/my-debug-module\.js$/,
sideEffects: false, // 显式告知 Webpack：此文件无副作用
},
// ...其他 rules
]
}⚠️ 注意事项：
- sideEffects: false 是强承诺：一旦声明，Webpack 将完全忽略该模块的所有顶层执行逻辑，仅保留被实际引用的导出项。若模块内有隐式副作用（如 localStorage.setItem('debug', 'on')），将导致运行时异常。
- DefinePlugin 替换 DEBUG 后，Terser 能进一步消除 if (false) { ... } 分支，但前提是模块本身已被 Tree Shaking 移除或精简；否则，无效导入仍会保留在 bundle 中。
- 可通过 webpack --stats=verbose 或 source-map-explorer 验证模块是否被成功剔除。
总结：Webpack 不是“没识别到死代码”，而是受 sideEffects 约束不敢动——声明无副作用 + 确保模块纯净，才是让 Tree Shaking 发挥效力的关键。
