很多人对 Webpack 的掌握停留在「会改配置」：能照着文档配 entry、output、loader，能抄一段 splitChunks 的代码，但一旦打包结果不符合预期，或者要写一个自己的插件，就不知道从哪儿下手。这门课针对的正是这个缺口——不是教你多背几个配置项，而是把 Webpack 拆开，看它内部到底怎么把一堆文件变成几个 bundle。

先确认你缺的到底是哪一块

Webpack 的学习断层通常出现在三个位置。第一层是配置层：知道 rules 里写 test 和 use，但说不清 loader 的执行顺序为什么是从右到左，pitch 阶段又是什么。第二层是构建流程层：能跑通打包，但说不清从 entry 到 chunk 再到 asset 中间经历了哪些钩子，tapable 的同步、异步、串行、并行钩子分别在什么场景用。第三层是源码层：想读源码，打开 lib 目录几百个文件直接劝退，不知道该从 Compiler.js 还是 Compilation.js 切入。

如果你在上面任意一层卡过，这门课的内容才对得上。如果你连 loader 和 plugin 的区别都还模糊，建议先补齐基础配置实践，否则直接读源码会变成抄代码。

课程会碰到的几个硬骨头

  • AST 与 Babel：Webpack 处理模块依赖，本质上是对源码做解析、转换、再生成。你需要理解 AST 是什么形态，@babel/parser 和 @babel/traverse 在里面扮演什么角色，为什么 import 语句能被识别成依赖。
  • 依赖图与模块管理：从一个入口文件出发，Webpack 怎么递归收集依赖、怎么去重、怎么把模块映射成 module graph 上的节点，chunk 又是怎么从这张图上切出来的。
  • Loader 原理：loader 不只是「文件转换器」，它是一条可中断、可传递的链。normal 阶段和 pitch 阶段的区别，以及为什么有些 loader 必须写成异步。
  • Plugin 与钩子：tapable 是 Webpack 插件体系的骨架。看懂 SyncHook、AsyncSeriesHook 这些类的实现，才能明白 plugin 里 apply 方法拿到的 compiler 上那些钩子什么时候触发。
  • 源码阅读方法：面对大型源码库，怎么定位主流程、怎么打断点、怎么用一个最小 demo 反推执行路径，这部分比记住某个函数的实现更有长期价值。

配套练习建议这样用

光看源码解析容易产生「看懂了」的错觉。比较有效的做法是：每学完一个模块，自己动手写一个最小实现。比如学完 loader 的 pitch 机制，写一个能在 pitch 阶段提前返回结果的 loader；学完 tapable，手写一个简化版 AsyncSeriesHook；学完插件系统，写一个在 emit 阶段修改输出文件内容的 plugin，然后打断点验证钩子触发顺序。课程里如果有对应的示例工程，不要直接跑通就过，把关键代码删掉自己补一遍，补不出来说明还没真正理解。

另外建议准备一个空项目专门用来做实验，不要在自己负责的业务项目里试手，避免配置改乱后还要花时间恢复。

看完应该能回答这些问题

  • 一个 import 语句从被解析到进入依赖图，中间经过了哪些步骤？
  • loader 的 normal 和 pitch 执行顺序相反，这在实际开发中能解决什么问题？
  • plugin 里的 apply 方法为什么能拿到 compiler？compiler 和 compilation 的区别是什么？
  • tapable 的几种钩子类型分别对应什么使用场景，写错类型会有什么后果？
  • 给你一个打包异常，你能定位到是解析阶段、依赖收集阶段还是生成阶段出的问题吗？

如果这些问题你能不查资料讲清楚，说明这门课的核心内容已经吃进去了。如果还有几道答不上来，回到对应的章节再读一遍源码，比继续往后赶进度更划算。

Webpack源码专精

课程详情

课程介绍

本课程深入解析Webpack的核心原理，从AST、Babel、依赖管理到Loader原理，全面覆盖Webpack的工作流程。课程将带领学员逐步阅读Webpack源码，掌握Webpack插件和高级配置的使用。

适合人群

  • 前端工程师
  • Webpack开发者
  • 对Webpack源码感兴趣的学习者

学习收获

  • 理解Webpack的内部工作原理
  • 掌握Webpack源码阅读技巧
  • 能够自定义Loader和Plugin
  • 精通Webpack高级配置

课程亮点

  • 系统讲解Webpack核心原理
  • 逐行解析Webpack源码
  • 实战Webpack插件和高级配置
  • 提升Webpack开发技能

课程目录

1.AST、Babel、依赖
  1-0.pptx
  1-0.txt
  1-1 babel与AST
  1-2 把let变成var
  1-3 将代码转化为ES5
  1-4 分析index.js的依赖
  1-5 递归地分析嵌套依赖
  1-6 静态分析循环依赖
  课后测试.docx
2.Webpack核心原理
  2-1 webpack 要解决的两个问题
  2-2 编译 import 和 export 关键字
  2-3 把多个文件打包成一个
  2-4 最终文件长什么样子
  2-5 打包器完成
3.Loader原理
  3-1 如何加载 CSS 文件
  3-2 创建 CSS loader
  3-3 发现打包器的问题
  3-4 阅读style-loader源码理解 webpack
  3-5 raw-loader和css-loader源码赏析
  3-6 loader 面试题
4.阅读Webpack源码前的准备
  3 第三种调试方式 yarn link
  4 其他准备工作
  4-1 课程优势
  4-2 两种调试 webpack-cli 的方法
5.逐行于都Webpack源码（上）
  1 分析 webpack-cli 是如何调用 webpack 的
  2 创建编译器 Compiler 的过程
  3 Tapable 是什么
  4 分析 Webpack 的整体流程
  5 Webpack 是如何处理 Entry 的
  6 你怎么知道 facotery 就是 nmf 呢？
  文章.doc
6.逐行阅读Webpack源码（下）
  1 回顾上节课
  2 factory.create 与 module
  3 _source 与 _ast
  4 Webpack 借助 acorn 的 parser 分析 JS
  5 如何用目前的知识在面试官面前装X
  6 Webpack 分析 JS 的过程
  7 Webpack 整体流程复述
  8 你可以看懂别人写的博客了
7.Webpack插件原理
  1 Webpack Plugin 工作机制
  2 插件 1 源码讲解
  3 插件 2 源码讲解
  4 插件 3 源码讲解
  5 loader vs plugin 区别
  6 如何自己写 plugin
  7 看看网上的相关文章
8.Webpack高级配置举例（1）
  1 如何使用课程中的代码
  2 让webpack输出的代码支持IE
  3 用babel-loader打包JS
  4 用babel-loader打包JSX
  5 给webpack配置ESLint插件
  6 用babel-loader打包TypeScript
  7 让ESLint支持TypeScript
  8 用babel-loader打包TSX
  9 科普：CRLF是什么
  10 让JS和TS支持@alias
  11 问答：webpack应学到什么程度
  12 建议：使用src代替@
9.Webpack高级配置举例（2）
  1 让 webpack 支持 SCSS
  2 SCSS 自动 import 全局文件
  3 SCSS 分享变量给 JS
  4 让 Webpack 支持 LESS 文件
  5 LESS 自动引入全局文件
  6 LESS 分享变量给 JS
  7 对比 SCSS 和 LESS
  8 支持 Stylus 文件
  9 Webpack config 重构
  10 在生产环境提取单独的CSS文件
  11 自动生成HTML页面
10.Webpack高级配置举例（3）
  1 Webpack 优化之单独打包 runtime
  2 为什么要单独打包 runtime
  3 Webpack 优化之用 splitChunks 将 node 依赖单独打包
  4 Webpack 优化之固定 moduleIds（不重要）
  5 Webpack 多页面
  6 Webpack 优化之 common 插件
  7 无限多页面的实现思路
Webpack源码.jpg