1. 路徑問題
- 路徑問題具體是,webpack中通過配置,按照一定規則,找到確定絕對唯一的路徑的過程。(但為了簡化配置,所以有很多預設設定,及相對地址,參考系)
- 具體包括,模組查詢,loader查詢,資源查詢等
- 核心原始碼
webpack
使用 enhanced-resolve 來解析檔案路徑。- 核心目的是,找到唯一確定的地址。但配置中地址有簡寫,預設設定,感覺特亂,且看本文細細梳理其中規則。
0. 總起
webpack
中resolve
與resolveLoader
是用來處理地址問題的
module.exports = {
//...
resolve: {
//...
},
resolveLoader:{
//...
}
};
複製程式碼
路徑分為:絕對地址,相對地址,模組地址,loader路徑
1. 絕對路徑
直接拿來用就OK了,但一般都是用node
path.resolve()
來得到絕對地址
2. 相對路徑
相對路徑,必須知道參考地址。當前檔案所在目錄。
3. 模組路徑
import 'module';
import 'module/lib/file';
複製程式碼
規則:
-
找路徑,模組將在
resolve.modules
中指定的所有目錄內搜尋。(注意,可能使用resolve.alias
配置選項來建立一個別名) -
找到路徑後,
//簡單虛擬碼(核心目的是,找到唯一確定的地址。但其中地址有簡寫,預設設定) if(是檔案){ if(路徑具有副檔名){ //直接檔案打包 }else{ //將使用 [resolve.extensions] 選項作為副檔名來解析 // resolve.extensions 自動解析確定的擴充套件 ,預設值 ['.wasm', '.mjs', '.js', '.json'] } }else if(是目錄){ if(包含package.json 檔案 && package.json 檔案中的 main 欄位返回一個有效路徑){ //按照順序查詢 resolve.mainFields 配置選項中指定的欄位。並且 package.json 中的第一個這樣的欄位確定檔案路徑 //resolve.mainFields 此選項將決定在 package.json 中使用哪個欄位匯入模組。根據 webpack 配置中指定的 target 不同,預設值也會有所不同。 一般是main }else{ //則按照順序查詢 resolve.mainFiles 配置選項中指定的檔名,看是否能在 import/require 目錄下匹配到一個存在的檔名。 //resolve.mainFiles 解析目錄時要使用的檔名。預設: ['index'] } } 複製程式碼
規則補充:
resolve.modules
預設值['node_modules']
,也就是說,找模組路徑預設是 從node_modules
中找。-
resolve.extensions
自動解析確定的擴充套件 ,預設值['.wasm', '.mjs', '.js', '.json']
resolve.mainFields
此選項將決定在package.json
中使用哪個欄位匯入模組。根據 webpack 配置中指定的target
不同,預設值也會有所不同。 一般是main
resolve.mainFiles
解析目錄時要使用的檔名。預設:['index']
4. 解析Loader
- Loader解析 完全遵守上面3個規則。
- 但增加了一個
resolveLoader
配置選項可以用來為 Loader 提供獨立的解析規則。
這組選項與上面的 resolve
物件的屬性集合相同,但僅用於解析 webpack 的 loader 包。預設:
module.exports = {
//...
resolveLoader: {
modules: [ 'node_modules' ],
extensions: [ '.js', '.json' ],
mainFields: [ 'loader', 'main' ]
},
resolve:{//...}
};
//也就是說,resolveLoader 完全是一個新的resolve
複製程式碼
5. 快取
-
如何快取?
每個檔案都會被快取
-
快取失效機制?
//虛擬碼 if(觀察模式){ //只有修改過的檔案會從快取中摘出 }else{ //不會自動清理快取 //所以,每次編譯前都的清理快取 } 複製程式碼