Laravel mix, webpack, terser - 在生产包中剥离控制台日志答案

【问题标题】：Laravel mix, webpack, terser - strip console log in production bundleLaravel mix, webpack, terser - 在生产包中剥离控制台日志
【发布时间】：2021-10-08 07:37:27
【问题描述】：

我正在尝试从我的 laravel + react 应用程序的生产版本中删除控制台日志和控制台调试。我找到了许多不同的解决方案，但似乎没有一个适合我的环境。

我仍在尝试了解整个 mix/webpack/terser 管道。

我错过了什么？

webpack.mix.js

let mix = require('laravel-mix');
const TerserPlugin = require('terser-webpack-plugin');

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();

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
    modules: [
      'node_modules'
    ]
  },
  // anything below this point is attempts that did not work.
  stats: "errors-only",
  watchOptions: {
    ignored: /node_modules/
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: true,
          compress: {
            drop_console: true,
            drop_debugger: true
          },
          output: { comments: false, beautify: false }
        },
      }),
    ],
  }
});

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

package.json

{
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

【问题讨论】：

你为什么要使用 terser ？直到现在我才听说过。 Terser 辅助的 Webpack (Laravel Mix) 带来了什么劣势？
我并没有特别尝试使用任何东西，terser 只是 laravel mix 使用的默认压缩模块。 cf laravel-mix.com/docs/4.0/options 如果您知道另一种有效的方法，我会采用它
我不知道如何使用它，也不会修改它，但是阅读source code，我在src/config.js 看到有一个默认配置（也许你想看看它是什么是）。所以任何你想添加或修改的东西，我认为你应该按照它上面的 URL this one 这样你就可以知道在那里直接编辑什么作为 terser webpack's config。
我认为this 会帮助你。
感谢您的指点，但我仍然无法使其正常工作。我看到 terser 正在我的构建终端中运行，但日志仍然存在于最终应用程序中。我清除了我的缓存并重新安装了我的节点模块以确保它没有任何改变。

标签： reactjs laravel webpack laravel-mix terser

【解决方案1】：

试试这个，而不是mix.webpack：

mix.options({
  terser: {
    terserOptions: {
      mangle: true,
      compress: {
        drop_console: true,
        drop_debugger: true
      },
      output: {
        comments: false,
        beautify: false
      }
    },
  },
});

您必须使用mix.options 来设置混合配置，该配置在config.js 中可用。

这只是我刚刚发现的另一个 SO 帖子：How to remove console.log from production?

【讨论】：

再次感谢，但它仍然无法在我身边工作。我一定在其他地方做错了什么。为了测试它，我将您的代码块放在混合导入之后，并使用npm run watch 启动我的应用程序。我可以给你更多信息来帮助我弄清楚这件事吗？
哦，我不这么认为。如果这不起作用，我不知道，因为我对此几乎一无所知，而且调试 JS 非常困难。