如何在vue项目打包时清除console.log()
需求:vue项目打包时清除console.log()代码:在vue.config.js中,添加如下配置:chainWebpack(config) {config.optimization.minimizer('terser').tap((args) => {args[0].terserOptions.compress.drop_console = truereturn args})}说明:实
·
- 需求:
- vue项目打包时清除console.log()
- 代码:
- 在vue.config.js中,添加如下配置:
chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) }
- 说明:实际上这个配置会清除所有console对象的函数。
- 在vue.config.js中,添加如下配置:
- 解析:
- 思路:
- 对webpack打包时使用的插件terser进行配置,使其在打包时清除console对象的函数。
- 溯源:
- 在vue cli官网英文版(Migrating from v3 | Vue CLI)可以找到代码原文,但如果我们想继续分析,可以在vue cli官网中文版(webpack 相关 | Vue CLI)看到关于通过链式操作配置webpack的语法,继而我们来到webpack官网(Optimization | webpack 中文文档),继续从文档中找到了通过提供定制terser实例来配置压缩工具的语法,但我们不需要完全替换terser实例,只需要修改一个属性值——让他在打包的时候清除console的方法。于是我们来到了webpack官网中关于配置terser的文档,找到了关于配置中compress字段的内容,但文档中并未对其进行详细说明,所以我们又来到了github上terser插件的文档(GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+),最终找到了terser插件配置中compress字段的drop_console属性的作用。
- 思路:
更多推荐
已为社区贡献1条内容
所有评论(0)