Webpack 進階之源碼分析（三）

本文基於webpack 接收的參數 options 爲非數組討論，且只討論 webpack 主流程。 上一篇文章主要講了 Tapable，順帶提了 webpack 方法執行流程，可是隻是一筆帶過，這篇文章會大體瞭解 webpack 方法的執行流程。

本文深刻度不夠，有些地方講的不夠深。理解深刻後，會再次重寫，彌補不夠深刻的遺憾。

對參數進一步轉換

方法內部首先對 options 進行校驗，接下來便對 options 進行處理，對一些 webpack 須要的參數，又未設置的參數，進行初始化操做。

options = new WebpackOptionsDefaulter().process(options);
複製代碼

實例化 Compiler

實例化 Compiler，並傳入 context，也就是當前工做目錄，並在實例化生成的對象 compiler 上掛載 options。

準備工做

1. 注入 NodeEnvironmentPlugin 插件，並給 compiler 對象賦予對象讀寫能力。具體源碼解析能夠看這裏，做者分析的十分詳細。
2. 注入 options 上定義的 plugins。
3. 調用 WebpackOptionsApply.js 文件的 process 方法。在方法內，主要處理 4 件事情。
   • 根據 options 注入內置插件，並對 options 作進一步的轉換。
   • 調用 entryOption 生命週期函數，收集 webpack 配置的入口信息。
   • 調用 afterPlugins 生命週期函數。
   • 調用 afterResolvers 生命週期函數。

構建主流程

視狀況運行 run 或 watch 方法，這裏僅以 run 舉例說明。

run

1. 調用 beforeRun 生命週期函數清除緩存，代碼位於 NodeEnvironmentPlugin 文件中。
2. 調用 run 生命週期函數。
3. 調用 compile 方法。

compile

1. 經過 this.newCompilationParams() 建立 params 對象，並調用 compiler 上的 normalModuleFactory 和 contextModuleFactory 生命週期函數。建立的對象上存在 normalModuleFactory、contextModuleFactory 和 compilationDependencies 屬性。
2. 調用 beforeCompile 生命週期函數，讀取 dll 中模塊信息( manifest )，代碼位於 DllReferencePlugin。
3. 調用 compile 生命週期函數，代碼位於 DllReferencePlugin、ExternalsPlugin 和 DelegatedPlugin。
   • DllReferencePlugin 主要是用來把 manifest 文件做爲 externals 來使用，並注入 ExternalModuleFactoryPlugin 和 DelegatedModuleFactoryPlugin
   • ExternalsPlugin 的注入是因爲傳入的 options 上有 externals，注入邏輯在 WebpackOptionsApply.js。
   • DelegatedPlugin 暫未發現用在哪，不理解其做用。
4. 經過 this.createCompilation() 方法建立 compilation 對象後，會調用 thisCompilation 和 compilation 兩個生命週期函數。
5. 調用 make 生命週期函數，函數內部經過調用 compilation 的 addEntry 方法添加入口依賴，入口依賴共有四種，分別爲 MultiEntryPlugin、DynamicEntryPlugin、DllEntryPlugin 和 SingleEntryPlugin。
6. 入口依賴添加完成後，會經過調用 _addModuleChain 方法得到此模塊的 moduleFactory，並調用其 create 方法，方法中調用 beforeResolve 生命週期函數，對模塊位置進行解析。
7. 調用 buildModule 函數，函數內部會調用 NormalModule 文件中的 doBuild 方法，doBuild 方法中會使用 loader-runnner 庫中 runLoader 方法構建模塊。
8. 調用 compilation 對象上 seal 生命週期函數，打包 chunks 和 assets。
9. 調用 emit 生命週期函數，輸出編譯文件。

最後

webpack 主流程十分複雜，有時候會發現難以理解，常常須要拜讀大佬文章，耗時嚴重，又不知道如何描述，非常頭疼。故接下來會把精力投入到 react 源碼。

推薦閱讀

• Webpack源碼解讀：理清編譯主流程

Webpack 進階之源碼分析文章列表

• Webpack 進階之源碼分析（一）
• Webpack 進階之源碼分析（二）