webpack之路徑徹底吃透

曹毅blog發表於2018-10-09

1. 路徑問題

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

0. 總起

webpackresolveresolveLoader 是用來處理地址問題的

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{
        //不會自動清理快取
        //所以,每次編譯前都的清理快取
    }
    複製程式碼

相關文章