作者介绍
我是范文杰，十年前端老人，目前就职于字节-朝夕光年-游戏平台前端团队，公众号「Tecvan」作者，重度 帝王蟹 爱好者，对前端工程化、性能、跨端开发、海鲜烹饪等有深入研究。
小册介绍
在现代 Web 应用开发中，Webpack 俨然已经成为几乎能满足所有构建需求的工程化基础设施之一，虽然近几年受 Vite、Rollup 等新型构建工具影响，热度有所降低，但它依然占据高达 89% 的使用率，依然被广泛应用于 Web、跨端、微前端、WASM、NPM 库等应用场景，是当下最值得学习的前端工程化工具之一！
但问题在于 Webpack 太复杂了！时至 5.0 版本，Webpack 功能集变得非常庞大，包括：模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、Sourcemap、Module Federation、devServer等等，为了实现这些功能，Webpack 生态复杂度已经到了非常惊人的程度：
- 接近 500 份JS文件，相应的有 400+ 种 Class；
- 7.4 万行代码，2 万行注释；
- 160+ 个内置插件，200+ 个hook；
- 数千种社区组件。
这种体量下，光是学习如何搭配出满足场景构建需求的配置，就已经很是让人头秃，更别说掌握性能优化技巧、Loader/Plugin 组件开发、运行原理之类的“高级”课题了。
更大的问题在于，社区里很难找到真正让人满意的学习材料，要么内容版本太老旧，停留在 3.0 或更早时代；要么停留在“使用”的层面，没有更透彻讲解功能背后的实现原理。
以至于我个人遇到一些复杂问题的时候，都只能直接阅读源码。慢慢地，我也摸索出一些体系化、框架性的认知以及学习方法，发现这事没之前想象的那么难，于是决定出本小册，将我的学习经验分享给有需要的同学，希望可以帮大家少走弯路。
小册内容将围绕 Webpack 5.0 展开：
- 基本用法：以更结构化方式介绍 Webpack 及常用组件的用法，并结合具体应用场景(如 WASM、NPM 库、微前端等)，讲解各自特有的构建需求与相关实现；
- 性能优化：讲解如何衡量 Webpack 构建性能，进而介绍各项常见的构建、产物性能优化手段，及其背后的实现原理；
- 自定义组件：讲解 Webpack Loader、Plugin 的作用与基本形态，以及许多具体的开发技巧与辅助工具；
- 核心原理：讲解 Webpack 5.0 的核心原理，包括：构建从启动到结束的运行过程、Chunk 分包规则及实现原理、Loader/Plugin 与 Webpack 核心架构、模块转译与打包原理、Tree-Shaking 原理，等等。
提示：虽然 Webpack 5.0 更新力度很大，但多数功能、实现原理均可套用到 Webpack 4.0 上，你大可不必担心内容普适性问题。
总之，我将从最基础的用法开始，逐步递进、深入挖掘 Webpack 最底层的实现，必定能帮助大家构建起更成熟、体系化的 Webpack 知识结构。
你会学到什么？
小册将为大家提供关于 Webpack 四个维度的知识：
- 怎么用：如何搭建适合特定场景的 Webpack 构建环境，包括：Web、SSR、WASM、NPM 等；
- 怎么用好：如何衡量、优化 Webpack 构建性能、产物运行性能；
- 怎么扩展：如何开发 Webpack Loader、Plugin，以及诸多开发工具、技巧介绍；
- 底层实现：Webpack 核心工作流，以及一些复杂构建技术的具体实现原理。
相信这些内容必定能帮助你体系化理解 Webpack 使用方法、实现原理及相关生态体系，深化工程化实践认知，进而构建属于自己的差异化竞争力。
即使你已经习惯通过诸如 Create React App、Vue CLI 之类的脚手架工具间接使用 Webpack，你也能从小册中习得这些工具底层如何与 Webpack 协作；如何为脚手架项目添加定制能力；又或者，如何进一步优化配置，提升编译性能，等等。
适宜人群
小册内容较为复杂，有一些基础场景的用法介绍，但主要篇幅围绕 Webpack 原理、高级特性展开，因此有不低的理解门槛，更适合那些具有较扎实的前端知识基础，但期望进一步补齐知识结构，全面、深入学习前端工程化体系的中高阶前端同学。
名人推荐
购买须知
- 本小册为图文形式内容服务，共计 30 节；
- 全部文章已经更新完成；
- 购买用户可享有小册永久的阅读权限；
- 购买用户可进入小册微信群，与作者互动；
- 掘金小册为虚拟内容服务，一经购买成功概不退款；
- 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
- 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io