Remove console.logs with Webpack & Uglify
Solution 1:
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,
},
},
}),
],
},
};
Solution 2:
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.
Solution 3:
This is the new syntax for Webpack v4:
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
},
}),
],
},
Solution 4:
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: {...}
}];
};
Solution 5:
For uglifyjs-webpack-plugin, wrap options inside an uglifyOptions object:
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})
]