小册上新｜使用率超过 89%，Webpack 依然是绝对的大多数！

如果你是一名前端工程师，相信之前已经或多或少听过、用过 Webpack 这一构建工具，它是一种用于构建 JavaScript 应用程序的静态模块打包器，能够以一种相对一致且开放的处理方式，加载应用中的所有资源文件（图片、CSS、视频、字体文件等），并将其合并打包成浏览器兼容的 Web 资源文件。

注意，上面说的 “一致且开放” 的加载模型，这在当时算的上是非常 Breaking Change 的设计！

早期的前端社区虽然已经实现了许多模块打包器，例如 Gulp、Grunt、RequireJS、Browserify、Closure Compiler 等，但它们或简单合并执行多种构建任务；或聚焦于模块化方案的兼容处理；或仅仅实现 JavaScript 层面的工程化（合并、压缩、混淆）能力，都缺乏一个能够兼容处理所有资源、普适的抽象思维框架 —— 这意味着应对不同资源，需要使用不同的特化处理逻辑，且不同类型文件之间无法信息互通。

而 Webpack 则忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作 Module —— 模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助 Loader、Plugin 两种开放接口将资源差异处理逻辑转交由社区实现，实现统一资源构建模型，这种设计有很多优点：

• 所有资源都是 Module，所以可以用同一套代码实现诸多特性，包括：代码压缩、Hot Module Replacement、缓存等；
• 打包时，资源与资源之间非常容易实现信息互换，例如可以轻易在 HTML 插入 Base64 格式的图片；
• 借助 Loader，Webpack 几乎可以用任意方式处理任意类型的资源，例如可以用 Less、Stylus、Sass 等预编译 CSS 代码。

甚至在 Webpack 之后出现的许多新打包工具，例如 Rollup、Parcel、Snowpack 等，都或多或少受这种设计影响。

而且，Webpack 极强的开放性，也让它得以成为前端工程化环境的基座，我们可以围绕 Webpack 轻易接入一系列工程化工具，例如 TypeScript、CoffeScript、Babel 一类的 JavaScript 编译工具；或者 Less、Sass、Stylus、PostCSS 等 CSS 预处理器；或者 Jest、Karma 等测试框架，等等。

这些工具都不同程度上补充了 Webpack 不同方面的工程化能力，使得它能够成为一个大一统的资源处理框架，满足现代 Web 工程在效率、质量、性能等方面的诉求，甚至能够应对小程序、微前端、SSR、SSG、桌面应用程序、NPM 包等诸多应用场景。

也因此，即使在当下百花齐放的 Web 工程化领域中，Webpack 依然是最为广泛使用的构建工具之一。

目前，Webpack 已经发布了最新的 5.73.0 版本，现如今的 Webpack 已经非常非常成熟，在基础构建能力之外还提供了诸多锦上添花的工程化工具，包括：

• 基于 Module Federation 的微前端方案；
• 基于 webpack-dev-server 的 Hot Module Replacement ；
• 基于 Terser、Tree-shaking、SplitChunks 等工具的 JavaScript 代码压缩、优化、混淆方案；
• 基于 lazyCompilation 的延迟编译功能；
• 有利于提升应用性能的异步模块加载能力；
• 有利于提升构建性能的持久化缓存能力；
• 内置 JavaScript、JSON、二进制资源解析、生成能力；
• ……

陡峭的学习曲线

至今，Webpack 已经发展的几乎无所不能，但代价则是上手学习成本非常高，学习曲线非常陡峭！

这一方面是因为 Webpack 确实是一个极度复杂的构建系统，应用层面、实现层面都有非常多不明觉厉的名词、概念、逻辑模型。另一方面是缺少特别优质的学习资料，Webpack 官方虽然也提供了许多说明文档，但基本上都停留在应用层面；国内外社区也有一些优质文章、视频教程，但数量偏少，缺乏体系化与深度。

但是 Webpack 非常有必要学！

首先，正是因为 Webpack 很难，能静得下心来深挖的人非常少，所以深入学习 Webpack ，不仅能帮助你更快解决具体的工程技术问题，还能形成属于你个人的，极具区分度的核心竞争力！

而且，同类工具或多或少都有借鉴 Webpack 之处，虽然具体实现差异很大，但解决工程化问题的思路基本一致，所谓一通百通，深入理解 Webpack 底层逻辑以及处理具体问题的方式方法后，上手其他同类工具也会非常快。

其次，Vite 一类新一代 Unbundle 工具聚焦于解决特定场景问题，而 Webpack 则几乎无所不能，功能覆盖小程序、桌面应用、微前端、WASM 等诸多场景，且它还在持续迭代发展。

根据 State-of-JS 2021 的统计数据，2021年 Webpack 还保持高达 89% 的使用率，依然是绝对的大多数！

可见，Webpack 依然是一个值得长期投入学习，对个人、团队都极具成长意义的技术方向。

如何高效学习 Webpack？

既然 Webpack 应用范围这么广，学习价值这么高，为何社区相关的技术讨论热度却一直不愠不火呢？

最主要的原因还是在于 Webpack 实在太复杂了：上百种内置配置项，7万多行代码，以及几乎数不清的开源/闭源组件，涉及的知识点多、杂、深，已经不能仅仅停留在单一构建工具层面，而是需要扩展开来学习一整套工程化思维与方法论。

我们需要由浅入深、循序渐进，有章法有体系地学：

1. 上手实践各种场景下的构建配置方法，捋清楚最基本的使用规则。

Webpack 始终是一个工具，无论你多了解它的组成结构，有多精深的理论知识，没有经过大量实战应用，你就始终还是停留在门外汉水平。

Webpack 虽然内置了上百种配置项，如 devtool、module、resolve ，各种场景下特化的资源处理需求、数千种 Loader、Plugin 组件的使用，等等，看起来比较复杂，但其实它们的背后都隐含一套晦涩但自洽的工程逻辑。

学习这部分的重点是通过各种应用场景摸清使用规律，结构化地理解各基础配置项与常见组件的用法。

2. 初步理解底层构建流程，学会分析性能卡点并据此做出正确性能优化。

只会用还不行，你还得学会怎么用好，怎么用尽可能少的时间构建出性能足够好的应用。

这部分涉及内容比较广，纵向可以深挖到操作系统、计算机网络原理等，横向可以扩展到 ECMAScript 规范、多媒体资源编解码等，关键在于掌握分析方法，理解底层机制，做到融会贯通，举一反三。

3. 深入 Webpack 扩展规则，理解 Loader 与 Plugin 能做什么，怎么做。

实际上，Webpack 主体只是实现了最核心的构建工具流与 Loader、Plugin 架构，大部分具体功能都是通过具体插件与 Loader 实现的。

所以，学习这两种扩展组件的开发方法，进而理解两者能做什么、怎么做等，一是能帮助我们更深层次理解 Webpack 的构建过程；二是在遇到疑难杂症时能帮助我们迅速定位问题位置；三是必要时可以自己上手实现一些定制需求。

4. 深挖源码，理解 Webpack 底层工作原理，加强应用与扩展能力。

经过上面三个步骤，相信你已经成为一个非常成熟的 Webpack 使用者，但知其然还需知其所以然，接下来我们还是得深入 Webpack 源码，学习从启动构建，到递归编译模块代码，到封装打包，再到代码优化最终输出资产文件整个过程。

只有理解了这个过程，我们才算是真正吃透 Webpack 应用到原理整个知识体系，才能更深入理解各个配置项到底作用在哪些位置；哪些步骤容易造成性能卡点，我们要怎么优化；各个 Hook 到底在什么时间点，怎么触发等等。

小册介绍

基于这样的学习路径，小册也将沿着上述四个方向展开介绍 Webpack，核心部分主要是四大模块：

• 基础用法：以更结构化方式介绍 Webpack 及常用组件的用法，并结合具体应用场景(如 WASM、NPM 库、微前端等)，讲解各自特有的构建需求与相关实现；
• 性能优化：讲解如何衡量 Webpack 构建性能，进而介绍各项常见的构建、产物性能优化手段，及其背后的实现原理；
• 自定义组件：讲解 Webpack Loader、Plugin 的作用与基本形态，以及许多具体的开发技巧与辅助工具；
• 核心原理：讲解 Webpack 5.0 的核心原理，包括：构建从启动到结束的运行过程、Chunk 分包规则及实现原理、Loader/Plugin 与 Webpack 核心架构、模块转译与打包原理、Tree-Shaking 原理，等等。

总之，这本小册会从最基础的用法开始，逐步递进、深入挖掘 Webpack 最底层的实现，必定能帮助大家构建起更成熟、体系化的 Webpack 知识体系！

上新特惠，限时6折

7月13日～7月20日，小册上新期特惠，限时6折，原价 ¥59.9，现价仅需 ¥35.94。

一杯咖啡的价格，和「字节资深前端工程师」学习一门经典技术，快👇「点击下方图片」加入学习吧！