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

一、如何調試閱讀源碼

若是想要了解 Webpack 的流程，只要閱讀 @七珏 細說 webpack 之流程篇 所述的內容就夠了，講解地比較全面了；本文就不對 Webpack 流程再作重複的描述，而是從另一個角度補充分析 Webpack 源碼；

Webpack 中最爲重要的無非是 Compiler 、Compilation 、Module等對象，閱讀源碼的過程其實能夠認爲是 瞭解對象的方法和屬性的過程；通讀 Webpack 這個大工程的源碼，以一個公司（Company）來類比，你會發現這幾個對象的關係大體以下：

• Webpack 就是一個大公司
• Compiler 就像公司的董事會，只把握公司大方向的走向，不關心細節實現
• Compilation 就像是 CEO，由董事會任命，主要操心整個公司運行，調度各個部門運做
• ModuleFactory 就像各個部門了，從事打造各類產品細節
• 最終輸出的 bundle 就像是具體的產品

這個類比或許有些欠妥，但也大體能展示出這個核心功能模塊的位置，有個大概瞭解便可；

二、分析對象屬性和方法

在源碼分析中，最基本的有兩點：

1. 須要分析對象自己的屬性和方法
2. 分析對象之間的關係（繼承、實現）等

和人的社交相似，前者回到某我的自己的屬性（性別、年齡等）和功能（琴棋書畫等技能），後者回答某人人的社會關係（兄弟、父子等關係）；

以 Compiler 實例爲例，在 Webstorm 中咱們打一個斷點，右鍵使用 Evalute Expression... 功能：

獲取該實例對象的屬性，直接使用 Object.getOwnPropertyNames(obj) 獲取：

使用Object.getPrototypeOf(compiler) 就能根據當前實例獲取其原型對象，主要是關注上面定義的方法：

同時進一步分析其繼承的對象，就能獲知 Compiler 對象的繼承關係：

到這裏爲止咱們已經比較全面地掌握了 Compiler 對象，對源碼的進一步分析打下了基礎；好比在此基礎上，咱們能夠分析上一節所述的 make事件階段 過程：

以及 loader 加載過程：

等等其餘你想了解的內容，均可以基於上面的功能分析出來，這裏就不一一列舉了。

正所謂四兩撥千斤，找對要分析的 對象 以及 它的關係網 ，就找到了正確的分析源碼的方法；

下面的是個人公衆號二維碼圖片，歡迎關注。