Webpack5 核心原理与应用实践--掘金小册课程推荐/优惠

作者介绍

我是范文杰，十年前端老人，目前就职于字节-朝夕光年-游戏平台前端团队，公众号「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 四个维度的知识：

1. 怎么用：如何搭建适合特定场景的 Webpack 构建环境，包括：Web、SSR、WASM、NPM 等；
2. 怎么用好：如何衡量、优化 Webpack 构建性能、产物运行性能；
3. 怎么扩展：如何开发 Webpack Loader、Plugin，以及诸多开发工具、技巧介绍；
4. 底层实现：Webpack 核心工作流，以及一些复杂构建技术的具体实现原理。

相信这些内容必定能帮助你体系化理解 Webpack 使用方法、实现原理及相关生态体系，深化工程化实践认知，进而构建属于自己的差异化竞争力。

即使你已经习惯通过诸如 Create React App、Vue CLI 之类的脚手架工具间接使用 Webpack，你也能从小册中习得这些工具底层如何与 Webpack 协作；如何为脚手架项目添加定制能力；又或者，如何进一步优化配置，提升编译性能，等等。

适宜人群

小册内容较为复杂，有一些基础场景的用法介绍，但主要篇幅围绕 Webpack 原理、高级特性展开，因此有不低的理解门槛，更适合那些具有较扎实的前端知识基础，但期望进一步补齐知识结构，全面、深入学习前端工程化体系的中高阶前端同学。

名人推荐

• 重新认识 Webpack：旧时代的破局者

• 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？

• 如何搭建 Vue 全栈开发环境？

• 如何理解 Webpack 配置底层结构逻辑？

• 如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？

• 如何搭建 React 全栈开发环境？

• 使用 Webpack 构建 NPM Library 的正确方式

• 如何借助 Webpack 开发 PWA、Node、Electron 应用？

• 使用 Webpack 构建微前端应用

• 深入理解图像加载原理与最佳实践

• 深入理解 Webpack 核心配置结构

• 构建性能：分享 7 款常用的性能分析工具

• 如何使用 Webpack 持久化缓存大幅提升构建性能？

• Webpack 都有哪些实现并行构建的方法？

• 不止 Terser：揭秘代码压缩的门门道道

• 有哪些值得学习的构建性能极致优化技巧？

• Loader 开发基础：从开源项目学到的 Loader 开发技巧

• 如何正确使用 SplitChunks提升应用性能？

• 还有哪些值得学习的应用性能极致优化技巧？

• Loader 开发进阶：如何用好 Loader 扩展开发工具？

• 插件开发基础：实例剖析插件基本形态与架构逻辑

• 插件开发进阶：如何提升插件健壮性？

• Dependency Graph：如何管理模块间依赖？

• Tree-shaking：如何删除无用模块导出？

• Init、Make、Seal：真正读懂 Webpack 核心流程

• Chunk：三种产物的打包逻辑

• Sourcemap：源码映射原理与应用技巧

• Runtime：模块编译打包及运行时逻辑

• HMR：如何动态替换页面代码？

• 插件架构：Hook 体系是如何影响 Webpack 架构的？