webpack 中的 loader

webpack 核心概念

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。

Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。

Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。

Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要的事情。

Output：輸出結果，在 Webpack 經過一系列處理並得出最終想要的代碼後輸出結果。

context: context 即是項目打包的路徑上下文，如果指定了 context, 那麼 entry 和 output 都是相對於上下文路徑的，contex 必須是一個絕對路徑

Webpack 啓動後會從 Entry 裏配置的 Module 開始遞歸解析 Entry 依賴的所有 Module。每找到一個 Module，就會根據配置的 Loader 去找出對應的轉換規則，對 Module 進行轉換後，再解析出當前 Module 依賴的 Module。這些模塊會以 Entry 爲單位進行分組，一個 Entry 和其所有依賴的 Module 被分到一個組也就是一個 Chunk。最後 Webpack 會把所有 Chunk 轉換成文件輸出。在整個流程中 Webpack 會在恰當的時機執行 Plugin 裏定義的邏輯。

loader 的三種寫法

// 方法1
module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        loader: ['style-loader','css-loader']
      }
    ]
  }
}

// 方法2
module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader','css-loader']
      }
    ]
  }
}

// 方法3
module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          {
            loader: 'style-loader',
            options: { insert:'top' } // 方便傳遞參數
          },
          'css-loader'
        ]
      }
    ]
  }
}

file-loader 可以指定要複製和放置資源文件的位置，以及如何使用版本哈希命名以獲得更好的緩存。此外，這意味着你可以就近管理圖片文件，可以使用相對路徑而不用擔心部署時 URL 的問題。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑爲正確的 URL。

url-loader 允許你有條件地將文件轉換爲內聯的 base-64 URL (當文件小於給定的閾值)，這會減少小文件的 HTTP 請求數。如果文件大於該閾值，會自動的交給 file-loader 處理。

webpack5 新增 Asset Modules 資源模塊。

資源模塊 (asset module) 是一種模塊類型，它允許使用資源文件（字體，圖標等）而無需配置額外 loader。

資源模塊類型 (asset module type)，通過添加 4 種新的模塊類型，來替換所有這些 loader：

1、asset/resource 發送一個單獨的文件並導出 URL。之前通過使用 file-loader 實現。

2、asset/inline 導出一個資源的 data URI。之前通過使用 url-loader 實現。

3、asset/source 導出資源的源代碼。之前通過使用 raw-loader 實現。

4、asset 在導出一個 data URI 和發送一個單獨的文件之間自動選擇。之前通過使用 url-loader，並且配置資源體積限制實現。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/8TiugC-N7dzju1vpb9UWUQ

猜你喜歡