使用Webpack＆amp;删除console.logs丑化

Question

我正在尝试使用Webpack的Uglify插件删除console.logs，但似乎与Webpack捆绑在一起的Uglify插件没有这个选项，文档中没有提到它。

我正在从webpack初始化uglify，如下所示：new webpack.optimize.UglifyJsPlugin()

我的理解是我可以使用独立的Uglify lib来获取所有选项，但我不知道哪一个？

问题在于drop_console无效。

Answer 1

使用UglifyJsPlugin我们可以处理评论，警告，控制台日志，但在开发模式下删除所有这些并不是一个好主意。首先检查一下webpack是否正在运行prov env or dev env，如果是prod env，则可以删除所有这些内容，如下所示：

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

参考：https://github.com/mishoo/UglifyJS2#compressor-options

更新2019年 现在需要使用terser插件来支持webpack v4中的ES6 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

尝试drop_console：

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

...

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

更新：对于webpack v4 ，它已经改变了一点：

highcharter

Answer 3

这是Webpack v4的新语法：

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

Answer 4

对于uglifyjs-webpack-plugin，在uglifyOptions对象中包装选项：

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

Answer 5

您可以使用terser-webpack-plugin 压缩选项 pure_funcs 参数有选择地删除控制台功能并保留所需的功能，例如console.error。

我正在使用“ webpack”：“ ^ 4.39.3”和“ terser-webpack-plugin”：“ ^ 2.3.2”。

步骤：
1. npm install terser-webpack-plugin --save-dev
2.修改webpack.config，将TerserPlugin设置为优化的最小化选项。

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: {...}
    }];
};

Answer 6

我为webpack v4添加了一个包含调试配置的综合答案

p

我在package.json中的脚本是这样的：

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
                        },
                    }

                })
            ]
            : []
    }

Answer 7

这是我从代码中删除alert（）和console.log（）所做的工作。 global_defs =>用console.log替换警报 然后drop_console删除所有console.logs，现在我的浏览器控制台中什么都没有显示

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

插件版本：

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

现在uglifyjs-webpack-plugin v1.2.6已发布，我为此使用了最新的文档，所以我想最新的插件也不会有问题。

Answer 8

webpack 4.x 移除 console.log 解决方案

1. 只删除 console.log 而保留其他控制台（推荐 ✅）

<块引用>

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',
                            // ...
                        ],
                    },
                },
            }),
        ],
    },
    // ...
}

2. 删除所有控制台，包括（console.log、console.error、console.warn、...等等）（不推荐??‍♂️）

<块引用>

drop_console：真，

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

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

所有控制台

<块引用>

Chrome Google，版本 88.0.4324.192（官方版本）(x86_64)

参考

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

Answer 9

使用它更好并且有效     const UglifyEsPlugin = require（'uglify-es-webpack-plugin'）

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