• home > tools > Bundler > webpack >

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

    Author:zhoulujun Date:

    不论是grunt还是gulp还是webpack,使用uglifJs压缩js,配置都一样的drop_console: true,pure_funcs: [ console log ]。webpack4使用terser-webpack-plugin 代替,实现生产去除console

    不论是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.net/html/tools/Bundler/webpack/2019_1009_8165.html