'Laravel mix, webpack, terser - strip console log in production bundle

I'm trying to strip console log and console debugs from the production build of my laravel + react app. I found many different solutions but none seemed suitable for my environment.

I'm still trying to understand the whole mix / webpack / terser pipeline.

what am I missing ?

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",
reactjslaravelwebpacklaravel-mixterser


Solution 1:[1]

Instead of mix.webpack try this:

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

You have to use mix.options to set mix config that is available in the config.js.

This is just another SO post I found just now: How to remove console.log from production?

Solution 2:[2]

You probably check your build file's extension! I'm not using laravel but struggling with this with my react project and solved it by adding test regex property for .js (default is .mjs)

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, // you should add this property
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'], // Delete console
          },
        },
      }),
    ],
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Taehyun Hwang

Related Questions