reactjs - uglify - webpack js minify
eliminar console.logs con Webpack y Uglify (7)
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.
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,
},
},
}),
],
},
};
Esta es la nueva sintaxis para Webpack v4:
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
},
}),
],
},
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.
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"
Para uglifyjs-webpack-plugin, ajuste las opciones dentro de un objeto uglifyOptions:
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})
]
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,
}
}
})
]
}
Usar esto es mejor y funciona const UglifyEsPlugin = require (''uglify-es-webpack-plugin'')
module.exports = {
plugins: [
new UglifyEsPlugin({
compress:{
drop_console: true
}
}),
]
}