Webpack 源碼（二）—— 如何閱讀源碼

wing324 發布于2019-08-20 13:37 / 2190人閱讀

摘要：正所謂四兩撥千斤，找對要分析的對象以及它的關系網，就找到了正確的分析源碼的方法下面的是我的公眾號二維碼圖片，歡迎關注。

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源碼閱讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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