Webpack 中 resolve 路徑解析
我們先要從 Webpack 中 resolver 這個(gè)概念說(shuō)起。Webpack 帶來(lái)的一大理念是：一切皆模塊。在項(xiàng)目中我們可以使用 ESM 的方式 import './xxx/xxx' 或者 import 'some pkgin_nodemodules'，甚至使用 alias：import '@/xxx' 來(lái)實(shí)現(xiàn)模塊化。Webpack 在處理這些引用時(shí)，是通過(guò) resolve 過(guò)程，找到正確的目標(biāo)文件。
其實(shí)不光是項(xiàng)目代碼中的引入聲明，在 Webpack 的整體處理流程，包括 loaders 的尋找等，只要涉及到文件路徑的，都離不開(kāi) resolve 過(guò)程。因此 resolve 可以簡(jiǎn)單地理解為“文件路徑查找”。
Webpack 對(duì)使用者也暴露了 resolve 的配置，我們可以對(duì)文件路徑查找過(guò)程進(jìn)行適當(dāng)?shù)呐渲?，比如設(shè)置文件擴(kuò)展名，查找搜索的目錄等。因此，resolve 過(guò)程也會(huì)涉及到很多耗時(shí)的操作。
resolve: {// 設(shè)置查找搜索的目錄modules: [path.resolve(__dirname, 'node_modules')],// 設(shè)置文件擴(kuò)展名extensions: ['.js', '.mpx'],// 設(shè)置別名alias: { 'src': path.resolve('src'), }}
webpack 依賴 enhanced-resolve 來(lái)解析代碼模塊的路徑，webpack 配置文件中和 resolve 相關(guān)的選項(xiàng)都會(huì)傳遞給 enhanced-resolve 使用，我們介紹了這些選項(xiàng)的作用。
Webpack 源碼中對(duì)于 resolver 的實(shí)現(xiàn)主要依賴 enhanced-resolve 的 ResolverFactory，它一共創(chuàng)建了三種類型的 resolver：
1、normalResolver：提供文件路徑解析功能，用于普通文件導(dǎo)入。
2、contextResolver：提供目錄路徑解析功能，用于動(dòng)態(tài)文件導(dǎo)入。
3、loaderResolver：提供文件路徑解析功能，用于 loader 文件導(dǎo)入。
在 Webpack 構(gòu)建運(yùn)行時(shí)，對(duì)于每一種類型模塊，都會(huì)使用 Resolver 預(yù)先判斷路徑是否存在，并獲取路徑的完整地址供后續(xù)加載文件使用。當(dāng)然對(duì)于這三種類型 resolver，也設(shè)置了緩存：Webpack 本身通過(guò) UnsafeCachePlugin 對(duì) resolve 結(jié)果進(jìn)行緩存，對(duì)于相同引用，返回緩存路徑結(jié)果。
UnsafeCachePlugin 插件原理很簡(jiǎn)單：它通過(guò) UnsafeCachePlugin.prototype.apply 方法，覆蓋原有 Resolver 實(shí)例的 resolve 方法，新的方法上會(huì)包裝一層路徑結(jié)果 cache，以及包裝了在完成原有方法后進(jìn)行 cache 更新的邏輯。
聽(tīng)上去也很簡(jiǎn)單，但是這個(gè)設(shè)計(jì)和實(shí)現(xiàn)過(guò)程關(guān)聯(lián)到「是否需要重新構(gòu)建」的決斷，這就值得深究一下了。我們來(lái)具體分析：
在通過(guò) UnsafeCachePlugin 插件完成了必備文件路徑查找之后，如果編輯過(guò)程沒(méi)有出錯(cuò)，且當(dāng)前 loader 調(diào)用了 this.cacheable，且存在上一次構(gòu)建的結(jié)果集合，那么即將進(jìn)入「是否需要重新構(gòu)建」的決斷（needRebuild），決斷策略根據(jù)當(dāng)前模塊的 this.fileDependencies 和 this.contextDependencies 這兩個(gè)關(guān)鍵因素來(lái)確定。this.fileDependencies 表示當(dāng)前模塊所關(guān)聯(lián)的文件依賴；this.contextDependencies 表示模塊關(guān)聯(lián)的文件夾依賴。我們先獲取這兩類依賴的最后變更時(shí)間（contextTimestamps、fileTimestamps）的最大值 timestamp，再和上一次構(gòu)建時(shí)間 buildTimestamp 進(jìn)行比對(duì)，如果 timestamp >= buildTimestamp，則表示需要重新編譯。如果不需要重新編譯，直接讀取 compilation 對(duì)象中的 cache 屬性相關(guān)值。