Remove console.logs with Webpack & Uglify
ReactjsWebpackBabeljsUglifyjsReactjs Problem Overview
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.
Reactjs Solutions
Solution 1 - Reactjs
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,
},
},
}),
],
},
};
Solution 2 - Reactjs
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 - Reactjs
This is the new syntax for Webpack v4:
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
},
}),
],
},
Solution 4 - Reactjs
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:
- npm install terser-webpack-plugin --save-dev
- 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 - Reactjs
For uglifyjs-webpack-plugin, wrap options inside an uglifyOptions object:
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})
]
Solution 6 - Reactjs
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"
Solution 7 - Reactjs
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.
Solution 8 - Reactjs
console.log
solutions
webpack 4.x remove - 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
Solution 9 - Reactjs
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
},
},
}),
],
},
Solution 10 - Reactjs
Use this is better and works const UglifyEsPlugin = require('uglify-es-webpack-plugin')
module.exports = {
plugins: [
new UglifyEsPlugin({
compress:{
drop_console: true
}
}),
]
}