原做者的webpack教程part3 webpack系統設計

簡介

這是第三篇,也是目前爲止的最後一篇了.

歸納

在這個系列的第一部分咱們學習了在webpack,和webpack的github 組織(其實就是介紹webpack各個基礎庫的用途,感興趣的能夠去看一下連接在這裏),在第二部分,咱們介紹了Tapable,學習了一個相似於nodejs 的 EventEmitle的只有2百多行的代碼的庫,還知道了他掌控着webpack 的整個插件系統.

除此以外,咱們知道了webpack 如何去建立tapable 實例(繼承Tapable的類),和webpack 如何去註冊他們,和執行他們的功能,最後咱們學習了每個在webpack中的tapable實例的功能.

構建依賴圖

在這篇文章中,咱們準備結合咱們所學到的東西和webpack如何構建依賴圖的高級解釋連在一塊兒

依賴圖是webpack中的一個關鍵架構,咱們相信,只要咱們知道了他是如何工做的,就能給咱們帶來更遠的眼界.(就是看webpack 看得更透徹了)

這裏做者貼了一個youtube的連接, 是做者在一次演講中對webpack 一次解析, 他建議配套觀賞,沒字幕,英文字幕都沒,並且還很長有一個半小時,有興趣的能夠去看一下.

第一步,初始化(Compiler)

設置咱們已經擁有的webpack配置(所謂的編譯選項), 當webpack運行的時候咱們遇到的第一個Tapable實例就是Compiler. 由於他只負責觸發run, failed, done這些高級事件,因此他是一箇中央調度器, 這個編譯器(Compiler) 始終會返回一個Compilation, 和其餘的一些重要的tapable實例,例如NormalModuleFactory, ContextModuleFactory

你能夠在這裏找到全部的註釋

當Compiler 實例化了編譯所需的插件和對象以後, 他會返回一個nwe Cpmpilation

第二步 開始編譯 此處用的是 Compilation (構建依賴圖)

在Compilation 以後 (第二個Tapable實例)

咱們把你應用的依賴圖描述成爲Compilation, 就好像把一我的描述成一個對象同樣,咱們必需要在某處有一個跟節點,而後分支出其餘的節點

咱們正在描述的就是你的配置的入口屬性,

即便咱們提供了入口點路徑,webpack 仍是須要確認那個路徑存不存在,下面咱們將會開啓一組遞歸操做

Resolve(Resolve 實例)

任什麼時候候均可以提供一個原請求(模塊的路徑),在這個例子中,就是入口點,webpack會首先發送這些路徑信息給Resolve實例去解析獲得入口文件.Resolve 實例會用 加強的nodejs 正則模版去肯定該路徑是否存在該模塊,而後返回一個關於Resolve 模塊的額外的信息, 這個信息包含文件系通通計信息,絕對路徑,和Resolve模塊的惟一ID標識

• 建立模塊 : 而後Resolve 會 在原信息在內存中或者緩存中被捕獲的時候. 發送 resolve 模塊信息到NormalMouduleFactory.
• Parse 模塊: 模塊工廠會指定Parser 實例到每個工廠建立的NormalModule,在模塊源存儲以後,Parser會分析這個模塊,此外,他還會經過被稱做loaders(loader 概念不懂得能夠查看官方文檔)一系列的轉換去發送Module,一個loader鏈在最後都會返回一個JavaScript代碼,所以,Parser如今能夠開始解析源碼而且聲稱AST(抽象語法樹)了
• 尋找依賴, 如今咱們在AST上有了模塊的信息,咱們能夠爲特定類型的語句和表達式遍歷AST了,咱們要尋找的是咱們定義的依賴說明,所以,當Parse遍歷AST 而且趕上require(foo)這樣的信息的時候,那麼這個信息就會存儲到Dependeny實例,而且把他跟原來的模塊關聯起來(鏈表的概念)

• 重複執行: 一旦模塊的全部的依賴都被找到了,咱們須要處理他們,這就是遞歸發生的地方(前面的連接),每個模塊都要執行上面的操做來找到他們依賴的模塊.

譯者注: webpack 大概的流程說得挺清楚明白的,就下來就是要看各位騷操做的時候了