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 not mentioned in the documentation.

I am initializing uglify from webpack like this:

new webpack.optimize.UglifyJsPlugin()

My understanding is that I can use standalone Uglify lib to get all the options, but I don't know which one?

The problem is that drop_console isn't working.

score 93 · Answer 1 · edited Mar 20 '22 at 16:22

93

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: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

edited Mar 20 '22 at 16:22

Spej

31
3
6

answered Dec 08 '16 at 14:15

Mayank Shukla

100,735
18
158
142

1

I am using drop_console: true but it doesn't remove console logs. Firs i though that webpacks uglify plugin doesn't come with those option, because there is no mention of them on official webpack docks. But it seems i am using correct uglify plugin, just drop_console doesn't work. here is my webpack config: http://pastebin.com/tvymXfZ0 – Mladen Petrovic Dec 08 '16 at 14:24
Try this: http://hastebin.com/kunokasenu.js This is my prod config, i also have separate dev config. – Mladen Petrovic Dec 08 '16 at 16:13
i m using the same code, everything is working fine when i build it with webpack -p. – Mayank Shukla Dec 08 '16 at 16:22
This won't work in Webpack 4: `webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.` – dude Mar 04 '18 at 21:59
1

See: https://stackoverflow.com/questions/49101152/webpack-v4-remove-console-logs-with-webpack-uglify – dude Mar 04 '18 at 22:24
so `config.optimization.minimize` or `config.optimization.minimizer`? – Feb 05 '20 at 23:48
need to add `minimize: true` as mentioned in official docs e.g: `optimization: { minimize: true, minimizer: [new TerserPlugin()], },` – Sp4Rx Jul 28 '21 at 05:14

Dominic · Answer 2 · 2020-10-08T01:18:57.547

59

Try drop_console:

plugins: [
    new Webpack.optimize.UglifyJsPlugin({
      compress: {
        drop_console: true,
      }
    }
]

Update: For webpack v4 it has changed a little:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

...

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

I personally think console logs (especially console.error) are very useful on prod and think it's a good idea to keep them. If you really want to drop specific console functions such as just console.log you should use pure_funcs option e.g. pure_funcs: ['console.log'] and this will drop console.log since pure functions do not produce side effects then Uglify can discard ones not assigned to anything.

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          // Drop only console.logs but leave others
          pure_funcs: ['console.log'],
        },
        mangle: {
          // Note: I'm not certain this is needed.
          reserved: ['console.log']
        }
      }
    })
  ]
}

For TerserJS (Uglify is deprecated and does not support new JS features you should NOT use it)

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true
        }
      }
    })
  ]
}

As discussed you can also use pure_funcs alternatively.

edited Oct 08 '20 at 01:18

answered Dec 08 '16 at 13:56

Dominic

62,658
20
139
163

4

That is exactly what i tried but it doesn't do anything. I can see it uglifies the code but it doesn't remove console logs. – Mladen Petrovic Dec 08 '16 at 14:21
I'm actually trying to do the opposite, and unfortunately setting `drop_console: false` hasn't helped me. – Ryan Mar 20 '17 at 02:28
3

This won't work in Webpack 4: `webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.` – dude Mar 04 '18 at 21:59
See: https://stackoverflow.com/questions/49101152/webpack-v4-remove-console-logs-with-webpack-uglify – dude Mar 04 '18 at 22:24
1

Do I use both terser and uglify? – Batman May 09 '19 at 22:57
Const doesn't work when you build, since UglifyJS doesn't understand ES6. – Rutwick Gangurde Oct 07 '20 at 19:01
You should use TerserJS nowadows NOT UglifyJS, it supports ES6+ features and is actively maintained – Dominic Oct 08 '20 at 01:18
It doesn't work! Neither Terser nor Uglify. The logs are not removed. I have been trying since yesterday! – Rutwick Gangurde Oct 08 '20 at 06:06
// Drop only console.logs but leave others pure_funcs: ['console.log'], // remove all console, includes(console.log, console.error, console.warn, ...adn son on) drop_console: true, – xgqfrms Feb 25 '21 at 03:09
The TerserPlugin approach worked for me but only in `mode:"production"` or without a mode specified – sergej Mar 21 '21 at 20:07

score 11 · Answer 3 · answered Jan 13 '20 at 20:25

You can use terser-webpack-plugin compress option pure_funcs parameter to selectively drop console functions and keep the ones that you want such as console.error.

I was using "webpack": "^4.39.3" and "terser-webpack-plugin": "^2.3.2".

Steps:
1. npm install terser-webpack-plugin --save-dev
2. modify your webpack.config to set TerserPlugin as a minimizer for optimization option.

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

module.exports = (env) => {
    return [{
        entry: '...',
        mode: 'production',
        output: {...},
        plugins: [...],
        optimization: {
            'minimize': true,
            minimizer: [new TerserPlugin({
                terserOptions: { 
                    compress: { 
                        pure_funcs: [
                            'console.log', 
                            'console.info', 
                            'console.debug', 
                            'console.warn'
                        ] 
                    } 
                 }
            })],
        },
        module: {...}
    }];
};

This does indeed hide the console logs for production mode in Webpack5. However, in development mode also, it is hiding the console logs. Is there a way to disable the minimizer for development mode? — Bunny, Dec 31 '22 at 07:07

score 8 · Answer 4 · answered Feb 28 '18 at 19:08

This is the new syntax for Webpack v4:

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

score 6 · Answer 5 · answered Nov 13 '17 at 15:10

6

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

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

answered Nov 13 '17 at 15:10

jhillers

61
1
1

score 4 · Answer 6 · answered Mar 08 '18 at 13:11

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"

score 4 · Answer 7 · answered Jun 21 '18 at 06:14

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.

xgqfrms · Answer 8 · 2021-02-25T06:22:56.473

webpack 4.x remove `console.log` solutions

only remove the console.log but leave other consoles (recommend ✅)

pure_funcs: ['console.log']

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// webpack.config.js
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                uglifyOptions: {
                    compress: {
                        pure_funcs: [
                            'console.log',
                            // 'console.error',
                            // 'console.warn',
                            // ...
                        ],
                    },
                    // Make sure symbols under `pure_funcs`,
                    // are also under `mangle.reserved` to avoid mangling.
                    mangle: {
                        reserved: [
                            'console.log',
                            // 'console.error',
                            // 'console.warn',
                            // ...
                        ],
                    },
                },
            }),
        ],
    },
    // ...
}

remove all consoles, includes(console.log, console.error, console.warn, ...and so on) (not recommend ‍♂️)

drop_console: true,

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// webpack.config.js
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                uglifyOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    },
    // ...
}

all consoles

Chrome Google, Version 88.0.4324.192 (Official Build) (x86_64)

refs

https://github.com/mishoo/UglifyJS#compress-options

score 0 · Answer 9 · answered May 06 '22 at 18:03

If TerserPlugin's drop_console does not applied, you probably check your build file's extension! I'm 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
          },
        },
      }),
    ],
  },

score -1 · Answer 10 · answered Jan 14 '19 at 17:43

-1

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

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

answered Jan 14 '19 at 17:43

NEO ViSiON

7
1

Remove console.logs with Webpack & Uglify

10 Answers10

webpack 4.x remove `console.log` solutions

all consoles

refs

Linked

Remove console.logs with Webpack & Uglify

10 Answers10

webpack 4.x remove console.log solutions

all consoles

refs

Linked

webpack 4.x remove `console.log` solutions