Webpack 源码(二)—— 如何阅读源码
1、如何调试阅读源码
如果想要了解 Webpack 的流程,只要阅读 @七珏 细说 webpack 之流程篇 所述的内容就够了,讲解地比较全面了;本文就不对 Webpack 流程再做重复的描述,而是从另外一个角度补充分析 Webpack 源码;
Webpack 中最为重要的无非是 Compiler 、Compilation 、Module等对象,阅读源码的过程其实可以认为是 了解对象的方法和属性的过程;通读 Webpack 这个大工程的源码,以一个公司(Company)来类比,你会发现这几个对象的关系大致如下:
- Webpack 就是一个大公司
- Compiler 就像公司的董事会,只把握公司大方向的走向,不关心细节实现
- Compilation 就像是 CEO,由董事会任命,主要操心整个公司运行,调度各个部门运作
- ModuleFactory 就像各个部门了,从事打造各种产品细节
- 最终输出的 bundle 就像是具体的产品
这个类比或许有些欠妥,但也大致能展现出这个核心功能模块的位置,有个大概了解即可;
2、分析对象属性和方法
在源码分析中,最基本的有两点:
- 需要分析对象本身的属性和方法
- 分析对象之间的关系(继承、实现)等
和人的社交类似,前者回到某个人本身的属性(性别、年龄等)和功能(琴棋书画等技能),后者回答某人人的社会关系(兄弟、父子等关系);
以 Compiler 实例为例,在 Webstorm 中我们打一个断点,右键使用 Evalute Expression... 功能:
获取该实例对象的属性,直接使用 Object.getOwnPropertyNames(obj)
获取:
使用Object.getPrototypeOf(compiler)
就能根据当前实例获取其原型对象,主要是关注上面定义的方法:
同时进一步分析其继承的对象,就能获知 Compiler 对象的继承关系:
到这里为止我们已经比较全面地掌握了 Compiler 对象,对源码的进一步分析打下了基础;比如在此基础上,我们可以分析上一节所述的 make事件阶段 过程:
以及 loader 加载过程:
等等其他你想了解的内容,都可以基于上面的功能分析出来,这里就不一一列举了。
正所谓四两拨千斤,找对要分析的 对象 以及 它的关系网 ,就找到了正确的分析源码的方法;