Webpack在Angular生产环境默认移除console.log()吗？需配置或插件？

默认行为 #

Angular的生产构建（无论是旧版的ng build --prod还是Angular 12+默认的ng build），其底层依赖的Webpack会使用Terser插件进行代码压缩和混淆，但默认不会自动移除console.log()语句。Terser的默认配置会保留console相关的方法调用，所以生产打包后的文件中依然会存在这些日志代码。

手动配置移除console.log()的方法 #

如果需要在生产环境中移除所有console.log，可以通过两种常用方式实现：

1. 修改Angular构建配置（angular.json）

在项目的angular.json文件中，找到对应项目的architect.build.configurations.production节点，添加terserOptions配置，指定drop_console为true：

"configurations": {
  "production": {
    // 保留原有配置...
    "terserOptions": {
      "compress": {
        "drop_console": true
      }
    }
  }
}

配置完成后重新执行生产构建，所有console.log()就会被从打包文件中移除。

2. 开发阶段通过ESLint限制

如果想从源头减少console.log的出现，可以在ESLint中启用no-console规则，在开发阶段就提示或禁止使用console.log。在.eslintrc.json中配置：

"rules": {
  "no-console": "warn" // 设为"error"可强制禁止
}

这种方式能帮助团队在开发时养成不随意添加日志的习惯，减少后续构建阶段的处理成本。

额外提示 #

你提到的日志安全隐患确实需要注意，但核心原则是不要在代码中硬编码任何敏感信息——哪怕移除了console.log，也不能依赖这种方式隐藏敏感数据。优先保证代码本身不包含机密内容，再配合日志移除配置，才是更安全的做法。

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