使用Webpack和Uglify删除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 需要在webpack v4中使用terser插件来支持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:

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

更新:对于webpack v4,它已经改变了一点:

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

...

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

Answer 3

这是Webpack v4的新语法:

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

Answer 4

您可以使用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 5

对于uglifyjs-webpack-plugin,在uglifyOptions对象中包装选项:

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