1. 程式人生 > >loader學習小計

loader學習小計

resolve

  • 用於匹配 resource 路徑的方法:
  • { test: ... } 匹配特定條件
  • { include: ... } 匹配特定路徑
  • { exclude: ... } 排除特定路徑
  • { and: [...] }必須匹配陣列中所有條件
  • { or: [...] } 匹配陣列中任意一個條件
  • { not: [...] } 排除匹配陣列中所有條件

上述的所謂條件的值可以是:

  • 字串:必須以提供的字串開始,所以是字串的話,這裡我們需要提供絕對路徑
  • 正則表示式:呼叫正則的 test 方法來判斷匹配
  • 函式:(path) => boolean,返回 true 表示匹配
  • 陣列:至少包含一個條件的陣列
  • 物件:匹配所有屬性值的條件

其他的配置欄位

  • options 給對應的 loader 傳遞一些配置項
  • use 欄位可以是一個數組,也可以是一個字串或者表示 loader 的物件

loader執行的順序

  • module.rules中從後往前執行
  • 多個 rule 匹配了同一個模組檔案,這個是無法保證這些rule的執行順序,當然可以配置enforce,其有兩個屬性(prepost) 分別對應前置型別或後置型別的loader。
  • 前置 -> 行內 -> 普通 -> 後置的順序執行。行內loader即例如const json = require('json-loader!./file.json')

module.noParse 欄位

  • 可以用於配置哪些模組檔案的內容不需要進行解析。對於一些不需要解析依賴(即無依賴) 的第三方大型類庫等,可以通過這個欄位來配置,以提高整體的構建速度。

使用 noParse 進行忽略的模組檔案中不能使用 import、require、define 等匯入機制。

module.exports = {
  // ...
  module: {
    noParse: /jquery|lodash/, // 正則表示式

    // 或者使用 function
    noParse(content) {
      return /jquery|lodash/.test(content)