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

wing324 发布于2019-08-20 13:37 / 2189人阅读

摘要：正所谓四两拨千斤，找对要分析的对象以及它的关系网，就找到了正确的分析源码的方法下面的是我的公众号二维码图片，欢迎关注。

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 加载过程：

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

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

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

GPU云服务器云服务器如何阅读java源码源码阅读 webrtc源码阅读 hbase源码阅读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81147.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
【用故事解读 MobX 源码（四）】装饰器和 Enhancer

摘要：所以这是一篇插队的文章，用于去理解中的装饰器和概念。因此，该的作用就是根据入参返回具体的描述符。其次局部来看，装饰器具体应用表达式是，其函数签名和是一模一样。等装饰器语法，是和直接使用是等效等价的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 评论0 收藏0