webpack之路徑徹底吃透

曹毅blog發表於2018-10-09
Web

1. 路徑問題

  1. 路徑問題具體是，webpack中通過配置，按照一定規則，找到確定絕對唯一的路徑的過程。（但為了簡化配置，所以有很多預設設定，及相對地址，參考系）
  2. 具體包括，模組查詢，loader查詢，資源查詢等
  3. 核心原始碼webpack 使用 enhanced-resolve 來解析檔案路徑。
  4. 核心目的是，找到唯一確定的地址。但配置中地址有簡寫，預設設定，感覺特亂，且看本文細細梳理其中規則。

0. 總起

webpack 中resolve與resolveLoader 是用來處理地址問題的

module.exports = {
  //...
    resolve: {
        //...
    },
    resolveLoader:{
        //...
    }
};
複製程式碼

路徑分為：絕對地址，相對地址，模組地址，loader路徑

1. 絕對路徑

直接拿來用就OK了，但一般都是用node path.resolve()來得到絕對地址

2. 相對路徑

相對路徑，必須知道參考地址。當前檔案所在目錄。

3. 模組路徑

import 'module';
import 'module/lib/file';
複製程式碼

規則：

  1. 找路徑，模組將在 resolve.modules 中指定的所有目錄內搜尋。（注意，可能使用resolve.alias 配置選項來建立一個別名)

  2. 找到路徑後，

    //簡單虛擬碼（核心目的是，找到唯一確定的地址。但其中地址有簡寫，預設設定）
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']
    }
}
複製程式碼

規則補充：

  1. resolve.modules 預設值['node_modules'],也就是說，找模組路徑預設是 從 node_modules中找。
  2. resolve.extensions 自動解析確定的擴充套件 ,預設值 ['.wasm', '.mjs', '.js', '.json']
  3. resolve.mainFields 此選項將決定在 package.json 中使用哪個欄位匯入模組。根據 webpack 配置中指定的 target 不同，預設值也會有所不同。 一般是main
  4. resolve.mainFiles 解析目錄時要使用的檔名。預設： ['index']

4. 解析Loader

  1. Loader解析 完全遵守上面3個規則。
  2. 但增加了一個 resolveLoader 配置選項可以用來為 Loader 提供獨立的解析規則。

這組選項與上面的 resolve 物件的屬性集合相同，但僅用於解析 webpack 的 loader 包。預設：

module.exports = {
  //...
  resolveLoader: {
    modules: [ 'node_modules' ],
    extensions: [ '.js', '.json' ],
    mainFields: [ 'loader', 'main' ]
  }，
  resolve：{//...}
};
//也就是說，resolveLoader 完全是一個新的resolve
複製程式碼

5. 快取

  1. 如何快取？

    每個檔案都會被快取

  2. 快取失效機制？

    //虛擬碼
if(觀察模式){
    //只有修改過的檔案會從快取中摘出
}else{
    //不會自動清理快取
    //所以，每次編譯前都的清理快取
}
複製程式碼

相關文章