使用Webpack和Uglify删除console.logs

reactjs Webpack

Pro路易

2020-03-24

我正在尝试使用Webpack的Uglify插件删除console.logs,但似乎Webpack附带的Uglify插件没有该选项,文档中未提及。

我正在像这样从webpack初始化uglify: new webpack.optimize.UglifyJsPlugin()

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

问题是那drop_console不起作用。

第3282篇《使用Webpack和Uglify删除console.logs》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
DavaidHarry 2020.03.24

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

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

这是Webpack v4的新语法:

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

这是我从代码中删除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已经发布,我为此使用了最新的文档,因此我想最新的插件也不会有任何问题。

十三 2020.03.24

通过UglifyJsPlugin我们可以处理注释,警告,控制台日志,但是在开发模式下删除所有这些并不是一个好主意。首先检查是否正在运行webpackprov 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,
          },
        },
      }),
    ],
  },
};

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android