作者：csywweb

前言

上文說道我們拿到了構建modlule的factory，和依賴等關鍵資料，透過addModuleTree經過的控制走到了。這個時候就開始了reslove過程。

本文主要分析， 內部 ，，，  這幾個鉤子。

配置檔案

本文圍繞的配置檔案如下：

factory.create

入口從開始，這裡的  是之前  獲取到的

先觸發了其內部的  鉤子，然後在回撥裡執行了  鉤子函式。

鉤子內有又呼叫了。

這裡看起來比較繞，簡單解釋一下：

鉤子的呼叫順序，就像是這樣。

->  ->

沒找到之前註冊過的地方，看起來什麼都沒幹，也有可能是我沒找到

之前在外掛中註冊過，這裡會處理下的資訊。

鉤子註冊在內部，用於解析這個，生成對應的loader和依賴資訊，這裡的重點就在

resolve

getLoaderResolver

進來的第一步 鉤子先呼叫了 返回loaderResolver，這個可以理解為是解析loader的方法。

簡單過一下分為以下幾步：

呼叫到了裡的方法

判斷是否有對應型別的快取

建立 ，

呼叫建立了一個 ，然後返回 繼續執行程式碼。

暴露了一個方法，用於解析。

normalResolver

接著往下走，略過一些判斷，直接走到了這個方法，這裡會根據webpack配置檔案中的選項，生成一個 。同樣的，這個也是的例項，也暴露出了一個方法。

接下來會把這個 和一些上下文資訊傳給方法，這裡最終會呼叫到的。

然後根據返回的和一起拼裝成。我們在後續解析loader的時候還會用到這個。

資料結構

解析loader

在的回撥裡繼續執行

這裡會根據配置檔案裡的得到需要的loader，這個例子裡，我們的是

接下來會透過這個的遍歷，生成， ， 。

然後呼叫得到。

當前例子並沒有和，這裡只有。內部呼叫解析，最後結果就是把裡的loader替換成了對應的真實檔案地址。

生成回撥資料

最後在處理下已經生成好的資料，首先是對的合併。把這幾個合併。然後一下， 這個來自於鉤子的入口傳入的data。

這裡著重講一下和， 這兩個方法返回的是對應檔案的解析器和構建模板的方法。按照當前示例，返回的是和。

然後這個將被用於。

在執行完的鉤子後

reslove結束了，即將開始下一步，建立！

小結

module resolve 流程用於獲得各 loader 和模組的絕對路徑等資訊。

在鉤子裡，先透過enhanced-resolve獲取，提供 resolve 方法

在方法裡，獲取r， 提供 resolve 方法。

解析，得到檔案的絕對路徑等資訊

根據得到 loader

使用  得到loader的絕對路徑等資訊

合併 loader， 拼接資料，

呼叫的鉤子，結束流程。