侧边栏壁纸
  • 累计撰写 3 篇文章
  • 累计创建 5 个标签
  • 累计收到 0 条评论
标签搜索

目 录CONTENT

文章目录

Vue-Cli3 配置 webpack 打包时注释 console 和 debugger 方法

Trwite
2022-02-07 / 0 评论 / 0 点赞 / 533 阅读 / 995 字
温馨提示:
本文最后更新于 2022-02-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

情景一:项目有 vue.config.js 文件

// 在 module.export 中的 configureWebpack 中进行环境监测配置,代码如下
module.export {
  // 写法1
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
  // 写法2
  configureWebpack: config => {
    if(process.env.NODE_ENV === 'production') {
      const rules = {
        warnings: false,
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log']
      }
      for(const key in rules) {
        config.optimization.minimizer[0].options.terserOptions.compress[key] = rules[key]
      }
    }
  }
}

情景二:项目有 webpack.prod.conf.js 此类文件

// 则直接在webpack的生产环境配置中配置
// 找到:plugins --> UglifyJsPlugin --> uglifyOptions
new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_console: true, // 注释 console
      pure_funcs: ['console.log'], //移除 console
    }
  }
})
0

评论区