webpack4与UglifyJs打包如何清除(删除)console，配置uglifyOptions参数

不论是grunt还是gulp还是webpack，使用uglifJs压缩js，配置都一样的

在https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/#uglifyoptions，并么有找到移除console的配置选项。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
new UglifyJsPlugin({
  //压缩选项
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'] // 移除console
    }
  },
  sourceMap: false,
  // 开启多线程
  parallel: true
})

webpack4并需要uglifyjs-webpack-plugin，查看文档https://webpack.js.org/configuration/optimization/#optimization-minimizer，也没有相关配置。使用 terser-webpack-plugin 代替，实现生产去除 console.log，配置如下

optimization: {
  minimizer: [
    new TerserPlugin({
      minify: (file, sourceMap) => {
        // https://github.com/mishoo/UglifyJS2#minify-options
        const uglifyJsOptions = {
          /* your `uglify-js` package options */
          compress:{
            drop_console:true
          }
        };

        if (sourceMap) {
          uglifyJsOptions.sourceMap = {
            content: sourceMap,
          };
        }

        return require('uglify-js').minify(file, uglifyJsOptions);
      },
    }),
  ],
},

使用vue-cli,配置移除console。

参考：vuecli3+webpack4优化实践（删除console.log和配置dllPlugin）、vue cli 3.x 生产环境去除console采坑记

使用babel-plugin-transform-remove-console插件 

npm install babel-plugin-transform-remove-console --save-dev

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
      modules: false,
      targets: {
        browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
      },
      useBuiltIns: 'entry',
    }
    ]
  ]
}

我都是自己配置webpack4，打包vue，安利下：webpack4从零开始搭建react与vue工程过程实录

转载本站文章《webpack4与UglifyJs打包如何清除(删除)console，配置uglifyOptions参数》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8165.html