zag666的博客

webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。站在代码逻辑的角度就是：webpack在编译代码过程中，会触发一系列 Tapable钩子事件，插件所做的就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样当webpack构建的时候，插件注册的事件就会随着钩子的触发而执行了。开发插件，离不开这些钩子。插件Plugin可以扩展webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。

用来清理 js 代码中的console.log// 将console.log替换为空 return content . replace(/ console\.log\(.*\);?/ g , "");

使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。

webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。