使用 Webpack & 删除 console.logs丑化 [英] Remove console.logs with Webpack & Uglify

问题描述

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

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.

我正在像这样从 webpack 初始化 uglify:

I am initializing uglify from webpack like this:

new webpack.optimize.UglifyJsPlugin()

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

My understanding is that I can use standalone Uglify lib to get all the options, but I don't know which one?

问题在于 drop_console 不起作用.

The problem is that drop_console isn't working.

推荐答案

使用 UglifyJsPlugin 我们可以处理评论、警告、控制台日志，但这不是一个好主意在开发模式下删除所有这些.首先检查您是否正在为 prod env 或 dev env 运行 webpack，如果它是 prod env，那么您可以删除所有这些，如下所示:

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

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

2019 年更新现在需要使用 terser 插件来支持 webpack v4 中的 ES6https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

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

这篇关于使用 Webpack & 删除 console.logs丑化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！