1、怎样调试浏览源码

假如想要相识 Webpack 的流程，只需浏览 @七珏 细说 webpack 之流程篇 所述的内容就够了，解说地比较周全了；本文就不对 Webpack 流程再做反复的形貌，而是从别的一个角度补充剖析 Webpack 源码；

Webpack 中最为重要的无非是 Compiler 、Compilation 、Module等对象，浏览源码的历程实在能够认为是 相识对象的要领和属性的历程；通读 Webpack 这个大工程的源码，以一个公司（Company）来类比，你会发明这几个对象的关联大抵以下：

• Webpack 就是一个大公司
• Compiler 就像公司的董事会，只把握公司大方向的走向，不关心细节完成
• Compilation 就像是 CEO，由董事会录用，重要费心全部公司运转，调理各个部门运作
• ModuleFactory 就像各个部门了，处置打造种种产物细节
• 终究输出的 bundle 就像是详细的产物

这个类比也许有些不当，但也大抵能展现出这个中心功用模块的位置，有个也许相识即可；

2、剖析对象属性和要领

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

1. 须要剖析对象自身的属性和要领
2. 剖析对象之间的关联（继续、完成）等

和人的交际相似，前者回到某个人自身的属性（性别、岁数等）和功用（琴棋书画等妙技），后者回复某大家的社会关联（兄弟、父子等关联）；

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

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

运用Object.getPrototypeOf(compiler) 就可以依据当前实例猎取其原型对象，重如果关注上面定义的要领：

同时进一步剖析其继续的对象，就可以获知 Compiler 对象的继续关联：

到这里为止我们已比较周全地控制了 Compiler 对象，对源码的进一步剖析打下了基本；比方在此基本上，我们能够剖析上一节所述的 make事宜阶段 历程：

以及 loader 加载历程：

等等其他你想相识的内容，都能够基于上面的功用剖析出来，这里就不一一列举了。

正所谓四两拨千斤，找对要剖析的 对象 以及 它的关联网 ，就找到了准确的剖析源码的要领；

下面的是我的民众号二维码图片，迎接关注。