Webpack 源码（二）—— 如何阅读源码

1、如何调试阅读源码

如果想要了解 Webpack 的流程，只要阅读 @七珏 细说 webpack 之流程篇 所述的内容就够了，讲解地比较全面了；本文就不对 Webpack 流程再做重复的描述，而是从另外一个角度补充分析 Webpack 源码；

Webpack 中最为重要的无非是 Compiler 、Compilation 、Module等对象，阅读源码的过程其实可以认为是 了解对象的方法和属性的过程；通读 Webpack 这个大工程的源码，以一个公司（Company）来类比，你会发现这几个对象的关系大致如下：

以一个公司（Company）来类比 Webpack

• Webpack 就是一个大公司
• Compiler 就像公司的董事会，只把握公司大方向的走向，不关心细节实现
• Compilation 就像是 CEO，由董事会任命，主要操心整个公司运行，调度各个部门运作
• ModuleFactory 就像各个部门了，从事打造各种产品细节
• 最终输出的 bundle 就像是具体的产品

这个类比或许有些欠妥，但也大致能展现出这个核心功能模块的位置，有个大概了解即可；

2、分析对象属性和方法

在源码分析中，最基本的有两点：

1. 需要分析对象本身的属性和方法
2. 分析对象之间的关系（继承、实现）等

和人的社交类似，前者回到某个人本身的属性（性别、年龄等）和功能（琴棋书画等技能），后者回答某人人的社会关系（兄弟、父子等关系）；

以 Compiler 实例为例，在 Webstorm 中我们打一个断点，右键使用 Evalute Expression… 功能：

使用表达式功能

获取该实例对象的属性，直接使用 Object.getOwnPropertyNames(obj) 获取：

获取属性

使用Object.getPrototypeOf(compiler) 就能根据当前实例获取其原型对象，主要是关注上面定义的方法：

获取Compiler原型的方法

同时进一步分析其继承的对象，就能获知 Compiler 对象的继承关系：

继承关系

到这里为止我们已经比较全面地掌握了 Compiler 对象，对源码的进一步分析打下了基础；比如在此基础上，我们可以分析上一节所述的 make事件阶段 过程：

make事件阶段

以及 loader 加载过程：

loader 加载图

等等其他你想了解的内容，都可以基于上面的功能分析出来，这里就不一一列举了。

正所谓四两拨千斤，找对要分析的 对象 以及 它的关系网 ，就找到了正确的分析源码的方法；

—END—