Webpack 模塊解析(Module Resolution)

resolver 是一個幫助尋找模塊絕對路徑的庫。 一個模塊可以作為另一個模塊的依賴模塊，然后被后者引用，如下：

import foo from 'path/to/module';
// 或者
require('path/to/module');

所依賴的模塊可以是來自應(yīng)用程序的代碼或第三方庫。 resolver 幫助 webpack 從每個 ?require?/?import? 語句中，找到需要引入到 bundle 中的模塊代碼。 當(dāng)打包模塊時，webpack 使用 enhanced-resolve 來解析文件路徑。

webpack 中的解析規(guī)則

使用 ?enhanced-resolve?，webpack 能解析三種文件路徑：

絕對路徑

import '/home/me/file';

import 'C:\\Users\\me\\file';

由于已經(jīng)獲得文件的絕對路徑，因此不需要再做進一步解析。

相對路徑

import '../src/file1';
import './file2';

在這種情況下，使用 ?import? 或 ?require? 的資源文件所處的目錄，被認(rèn)為是上下文目錄。在 ?import/require? 中給定的相對路徑，會拼接此上下文路徑，來生成模塊的絕對路徑。

模塊路徑

import 'module';
import 'module/lib/file';

在 ?resolve.modules? 中指定的所有目錄中檢索模塊。 你可以通過配置別名的方式來替換初始模塊路徑，具體請參照 ?resolve.alias? 配置選項。

• 如果 package 中包含 ?package.json? 文件，那么在 ?resolve.exportsFields? 配置選項中指定的字段會被依次查找，?package.json? 中的第一個字段會根據(jù) package 導(dǎo)出指南確定 package 中可用的 export。

一旦根據(jù)上述規(guī)則解析路徑后，resolver 將會檢查路徑是指向文件還是文件夾。如果路徑指向文件：

• 如果文件具有擴展名，則直接將文件打包。
• 否則，將使用 ?resolve.extensions? 選項作為文件擴展名來解析，此選項會告訴解析器在解析中能夠接受那些擴展名（例如 ?.js?，?.jsx?）。

如果路徑指向一個文件夾，則進行如下步驟尋找具有正確擴展名的文件：

• 如果文件夾中包含 ?package.json? 文件，則會根據(jù) ?resolve.mainFields? 配置中的字段順序查找，并根據(jù) ?package.json? 中的符合配置要求的第一個字段來確定文件路徑。
• 如果不存在 ?package.json? 文件或 ?resolve.mainFields? 沒有返回有效路徑，則會根據(jù) ?resolve.mainFiles? 配置選項中指定的文件名順序查找，看是否能在 import/require 的目錄下匹配到一個存在的文件名。
• 然后使用 ?resolve.extension?s 選項，以類似的方式解析文件擴展名。

Webpack 會根據(jù)構(gòu)建目標(biāo)，為這些選項提供合理的默認(rèn)配置。

解析 loader

loader 的解析規(guī)則也遵循特定的規(guī)范。但是 ?resolveLoader? 配置項可以為 loader 設(shè)置獨立的解析規(guī)則。

緩存

每次文件系統(tǒng)訪問文件都會被緩存，以便于更快觸發(fā)對同一文件的多個并行或串行請求。在 watch 模式 下，只有修改過的文件會被從緩存中移出。如果關(guān)閉 watch 模式，則會在每次編譯前清理緩存。

欲了解更多上述配置信息，請查閱 Resolve API。