Webpack 源码(二)—— 如何阅读源码

181 阅读2分钟
原文链接: segmentfault.com

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 对象的继承关系:

继承关系

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

make事件阶段

以及 loader 加载过程:

loader

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

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