大力智能前端基础架构团队在为业务项目优化编译速度的过程中，对基于 webpack 的编译过程进行了研究。本文对此进行展开在源码层面讲解 webpack 的编译原理。

当谈起Webpack Plugin时，我希望你能清楚的这些必不可少的知识点。通过 Webpack Plugin 你可以利用它来做什么，或者说它究竟可以为你带来什么,也许我们可以在文章中一探究竟。

「万字解析」架构视角图文并茂讲述Webpack Loader原理，从基础配置过渡源码实现，最终手把手带你复刻企业级loader。从原理搞懂Webapck中loader是如何处理你的文件。

「图文并貌」 探索Webpack团队设计Pitch Loader的含义，从Loader的设计哲学带你掌握Pitch Loader的真实应用场景。

「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。

「万字解析」详解 Tapable 核心工作机制，Webpack Plugin 必备前置知识解读。从原理玩转 Webpack ，真正精通所谓工程化前端。

loader 的本质 loader 就是导出了函数的 JS 模块，它会返回处理过后的结果给下一个 loader 上面的代码就是一个自定义 loader，它接受三个参数，其中最重要的是 content

前端性能优化已经过了刀耕火种的年代，现在更多的优化是从代码层面，其中重中之重的当然是 JS 的优化

上个月团队很多人都在反馈有个项目打包速度越来越慢，打包发布一次至少要半个小时，这个速度不仅我们接受不了，测试那边也多次反馈发布进度卡在前端，因此对该项目进行了打包优化.