reactjs - uglify - webpack js minify

eliminar console.logs con Webpack y Uglify

Question

Estoy tratando de eliminar console.logs con el complemento Uglify de Webpack, pero parece que el complemento Uglify que viene incluido con Webpack no tiene esa opción, no se menciona en la documentación.

Estoy inicializando uglify desde webpack así: new webpack.optimize.UglifyJsPlugin()

Tengo entendido que puedo usar Uglify lib independiente para obtener todas las opciones, pero no sé cuál.

El problema es que drop_console no funciona.

Answer 1

Con UglifyJsPlugin podemos manejar comentarios, advertencias, registros de consola, pero no será una buena idea eliminar todo esto en modo de desarrollo. Primero verifique si está ejecutando webpack para prov env or dev env , si es pro prov env or dev env , puede eliminar todo esto, de esta manera:

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
},
})
]
: []

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

ACTUALIZACIÓN 2019 Necesita usar el complemento terser ahora para la compatibilidad con ES6 en 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 2

Esta es la nueva sintaxis para Webpack v4:

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

Answer 3

Esto es lo que he hecho para eliminar alert () y console.log () de mis códigos. global_defs => reemplazar alertas con console.log luego drop_console elimina todos los console.logs y ahora no aparece nada en la consola de mi navegador

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

versiones de complementos:

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

En este momento se ha publicado uglifyjs-webpack-plugin v1.2.6 y utilicé las últimas documentaciones para este, así que supongo que no habrá ningún problema con el último complemento también.

Answer 4

He agregado una respuesta integral para webpack v4 con configuración de depuración

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
},
}
})
]
: []
}

Mis scripts en package.json son así:

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

Answer 5

Para uglifyjs-webpack-plugin, ajuste las opciones dentro de un objeto uglifyOptions:

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

Answer 6

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

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

Actualización: para webpack v4 ha cambiado un poco:

const UglifyJSPlugin = require(''uglifyjs-webpack-plugin'');
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true,
}
}
})
]
}

Answer 7

Usar esto es mejor y funciona const UglifyEsPlugin = require (''uglify-es-webpack-plugin'')

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