Module Resolution
文檔地址
通過指定絕對(duì)路徑來處理librariy以來。module可以作為以來從另外一個(gè)module引入。
import foo from 'path/to/module'
// or
require('path/to/module')
依賴module可以來自業(yè)務(wù)代碼或者第三方的library。
resolver幫助webpack查找每個(gè)通過require/import導(dǎo)入的代碼塊,并將這些依賴打包到bundle中。
webpack在構(gòu)建modules時(shí)使用enhanced-resolve來解決文件路徑的問題。
Resolving rules in webpoack
基于enhanced-resolve。webpack可以支持三種類型的文件路徑
- Absolute path
import "/home/me/file";
import "C:\\Users\\me\\file";
使用絕對(duì)路徑,則不需要再設(shè)置其他的規(guī)則
- Relative path
import "../src/file1";
import "./file2";
使用相對(duì)路徑,使用import or require引入的依賴會(huì)基于運(yùn)行環(huán)境的文件夾。
最終引入文件的路徑,基于引入文件路徑時(shí)的運(yùn)行環(huán)境而定,將運(yùn)行環(huán)境的路徑同相對(duì)路徑進(jìn)行拼接,生成絕對(duì)路徑。
- Module path
import "module";
import "module/lib/file";
通過查找resolve.modules中配置的文件夾來查找依賴的module。
可以通過resolve.alias配置,使用alias替換原來module路徑。
當(dāng)基于上述規(guī)則解決了依賴,resolver會(huì)檢測制定的路徑是一個(gè)文件,還是一個(gè)文件夾。
如果是指向一個(gè)文件:
- 如果path有文件擴(kuò)展名,則文件會(huì)被直接綁定使用。
- 如果path沒有文件擴(kuò)展名,則查找的文件后綴會(huì)通過resolve.extensions配置來決定。
resolve.extensions會(huì)讓resolver使用某個(gè)擴(kuò)展名(eg: .js ,.jsx)來解決依賴。
如果指向的是文件夾:
resolver會(huì)通過如下的步驟找到正確的文件
- 如果文件夾中包含package.json。則會(huì)按照順序從resolve.mainFields配置的文件中進(jìn)行查找,
package.json中第一個(gè)定義的文件路徑會(huì)作為查找結(jié)果。 - 如果沒有package.json或者resolve.mainFields返回的路徑不可用,
則會(huì)按照resolve.mainFields中定義的文件名在imported/required文件夾中按順序進(jìn)行查找。 - 文件后綴會(huì)通過使用resolve.extensions配置來進(jìn)行查找。
webpack會(huì)按照構(gòu)建對(duì)象使用合理的配置來解決以來。
默認(rèn)配置
Resolving Loaders
loader以來的查找規(guī)則同文件查找規(guī)則一樣,但是resolveLoader可以單獨(dú)為loader進(jìn)行配置。
Caching
文件系統(tǒng)都是又緩存的,所以五羅并發(fā)或連續(xù)請(qǐng)求相同文件速度都會(huì)很快。
在watch mode下,只有修改過的文件才會(huì)從緩存中被一處,如果未開啟watch模式,則緩存只會(huì)在重新編譯時(shí)被更新。
查看Resolve API來了解上述配置。