Laravel Mix+webpack+terser生产构建移除console日志的配置问题

问题核心原因 #

Laravel Mix 生产环境默认内置了 TerserPlugin 实例，你在 webpackConfig 中手动新增的 minimizer 配置不会覆盖默认规则，导致自定义的 drop_console 没有被实际应用。

正确修改步骤 #

1. 移除现有配置中冗余的 TerserPlugin 相关代码：
   • 删掉顶部 const TerserPlugin = require('terser-webpack-plugin'); 引入语句
   • 删掉 webpackConfig 节点下的整个 optimization 配置块
2. 使用 Laravel Mix 官方提供的 mix.options() 方法配置压缩规则，这是自定义 Terser 行为的唯一生效入口。

修改后完整 webpack.mix.js 配置 #

let mix = require('laravel-mix');

mix.react('resources/assets/js/app.js', 'public/js').version()
  .sass('resources/sass/app.scss', 'public/css').version()
  .copy('resources/assets/img', 'public/assets/img').version()
  .copy('resources/assets/font', 'public/assets/fonts').version()
  .copy('resources/assets/logos', 'public/assets/logos').version()
  .copy('storage/app/public', 'public/storage').version();

// 新增Terser配置
mix.options({
  terser: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      },
      output: {
        comments: false,
        beautify: false
      }
    }
  }
});

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
    modules: [
      'node_modules'
    ]
  },
  stats: "errors-only",
  watchOptions: {
    ignored: /node_modules/
  }
});

if (!mix.inProduction()) {
  mix.webpackConfig({ devtool: 'eval-cheap-module-source-map' });
}

可选精细化配置 #

如果你不需要删除所有 console 输出，只需要移除 console.log、console.debug，保留 console.warn、console.error 用于生产环境问题排查，可将 drop_console: true 替换为以下配置：

compress: {
  drop_debugger: true,
  pure_funcs: ['console.log', 'console.debug']
}

验证 #

配置修改完成后执行 npm run prod 重新构建生产包即可生效。如果配置修改后仍不生效，可先删除 node_modules/.cache 目录清除构建缓存后再重新构建。

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