Remove console.logs with Webpack & Uglify

Question

I am trying to remove console.logs with Webpack\'s Uglify plugin but it seems that Uglify plugin that comes bundled with Webpack doesn\'t have that option, its

Answer 1

For uglifyjs-webpack-plugin, wrap options inside an uglifyOptions object:

    plugins: [
    new UglifyJSPlugin({
        uglifyOptions: {
            compress: {
                drop_console: true
            }
        }
    })
]

Answer 2

I have added a comprehensive answer for webpack v4 with debug configuration

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
        minimizer: !debug ? [
            new UglifyJsPlugin({

                    // Compression specific options
                    uglifyOptions: {
                        // Eliminate comments
                        comments: false,

                        compress: {
                            // remove warnings
                                warnings: false,

                            // Drop console statements
                                drop_console: true
                        },
                    }

                })
            ]
            : []
    }

My scripts in package.json are like so:

"webpackDev": "npm run clean && export NODE_ENV=development && npx webpack",
"webpackProd": "npm run clean && export NODE_ENV=production && npx webpack -p"

Answer 3

With UglifyJsPlugin we can handle comments, warnings, console logs but it will not be a good idea to remove all these in development mode. First check whether you are running webpack for prod env or dev env, if it is prod env then you can remove all these, like this:

var debug = process.env.NODE_ENV !== "production";

plugins: !debug ? [
   new webpack.optimize.UglifyJsPlugin({

     // Eliminate comments
        comments: false,

    // Compression specific options
       compress: {
         // remove warnings
            warnings: false,

         // Drop console statements
            drop_console: true
       },
    })
]
: []

Reference: https://github.com/mishoo/UglifyJS2#compressor-options

UPDATE 2019 Need to use terser plugin now for ES6 support in webpack v4 https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

webpack.config.js

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

Answer 4

this is what I've done to remove alert() and console.log() from my codes. global_defs => replace alerts with console.log then drop_console removes all console.logs and now nothing shows up in my browser console

     new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          global_defs: {
            "@alert": "console.log",
          },
          drop_console: true
        }
      }
    }),

plugin versions:

"webpack":3.12.0,
"webpack-cli": "^3.0.3",
"uglifyjs-webpack-plugin": "^1.2.5",

Right now uglifyjs-webpack-plugin v1.2.6 has been released and I used latest documentations for this one, So I suppose there wont be any problem with latest plugin too.

Answer 5

Use this is better and works const UglifyEsPlugin = require('uglify-es-webpack-plugin')

module.exports = {
plugins: [
        new UglifyEsPlugin({
            compress:{
                drop_console: true
            }
        }),
] 
}

Answer 6

This is the new syntax for Webpack v4:

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true
        },
        output: {
          comments: false
        }
      },
    }),
  ],
},