webpack 打包去掉控制台的console.log

这是我参与更文挑战的第10天，活动详情查看： 更文挑战

很多时候测试的时候，我们为了方便找bug,会在代码之间穿插着console.log(),来在页面控制台进行打印，寻找问题的出处。但项目在打包的时候有时会全去掉，但那样又会遗漏几个。这样如果让用户看到的话，感觉不太好，假如包含重要信息，岂不是更不好。但要是真的去掉了，以后再一个一个加，去找问题出处，可能有些麻烦，这样的话，webpack打包时的一段配置就会帮你解决这个问题。

解决方案

使用uglifyjs-webpack-plugin包

npm i -D uglifyjs-webpack-plugin
//在webpack配置文件里
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins:[
...

new UglifyJsPlugin({
    uglifyOptions:{
        compress:{
            drop_console:true
        }
    },
    sourceMap:true,
    parallel:true    

})
...

]

我们可以参考

Compress options

• drop_console (default: false) — Pass true to discard calls to console. functions. If you wish to drop a specific function call such as console.info and/or retain side effects from function arguments after dropping the function call then use pure_funcs instead.*

这里我们重点关注drop_console 这个配置，当我们设置为true时，项目在打包的过程中，也就是在压缩代码的时候会通过这个drop_console配置来删除console.*的代码从而使我们生产环境中的console删除。很强大。推荐一下这个plugin。

webpack打包原理

webpack是一个javsScript应用程序的静态模块打包器。webpack打包时是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源。当webpack处理应用程序的时候会构建一个依赖关系图（dependency graph），其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个bundke。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性,使得整个系统扩展性很好。

我们先了解到这样。后面再给大家说一说webpack的核心概念。