載入器

載入器是套用於模組原始碼的轉換。它們允許您在import或「載入」檔案時預先處理檔案。因此，載入器有點類似於其他建置工具中的「任務」，並提供一種強大的方式來處理前端建置步驟。載入器可以將檔案從一種語言（例如 TypeScript）轉換為 JavaScript，或將內嵌圖片載入為資料 URL。載入器甚至允許您執行諸如直接從 JavaScript 模組import CSS 檔案等操作！

範例

例如，您可以使用載入器告訴 webpack 載入 CSS 檔案或將 TypeScript 轉換為 JavaScript。為此，您首先需要安裝您需要的載入器

npm install --save-dev css-loader ts-loader

然後指示 webpack 對每個.css檔案使用css-loader，對所有.ts檔案使用ts-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

使用載入器

有兩種方法可以在您的應用程式中使用載入器

• 設定檔（建議）：在您的webpack.config.js檔案中指定它們。
• 內嵌：在每個import陳述式中明確指定它們。

請注意，載入器可以在 webpack v4 中從 CLI 使用，但此功能已在 webpack v5 中棄用。

設定檔

module.rules 允許你在 webpack 設定中指定多個載入器。這是一種顯示載入器的簡潔方式，有助於維護乾淨的程式碼。它也提供每個個別載入器的完整概觀。

載入器從右到左（或從下到上）評估/執行。在以下範例中，執行從 sass-loader 開始，接著是 css-loader，最後以 style-loader 結束。有關載入器順序的更多資訊，請參閱 「載入器功能」。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

內嵌

可以在 import 陳述式或任何 等效的「匯入」方法 中指定載入器。使用 ! 將載入器與資源分開。每個部分相對於目前目錄解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

可以透過在內嵌 import 陳述式前加上字首來覆寫 設定 中的任何載入器、預載入器和後載入器

• 加上 ! 字首將停用所有設定的常態載入器

  import Styles from '!style-loader!css-loader?modules!./styles.css';

• 加上 !! 字首將停用所有設定的載入器（預載入器、載入器、後載入器）

  import Styles from '!!style-loader!css-loader?modules!./styles.css';

• 加上 -! 字首將停用所有設定的預載入器和載入器，但不會停用後載入器

  import Styles from '-!style-loader!css-loader?modules!./styles.css';

可以使用查詢參數傳遞選項，例如 ?key=value&foo=bar，或 JSON 物件，例如 ?{"key":"value","foo":"bar"}。

載入器功能

• 載入器可以串接。鏈中的每個載入器都會對已處理的資源套用轉換。鏈以相反順序執行。第一個載入器將其結果（套用轉換的資源）傳遞給下一個載入器，依此類推。最後，webpack 預期鏈中的最後一個載入器傳回 JavaScript。
• 載入器可以是同步或非同步的。
• 載入器在 Node.js 中執行，並且可以執行所有可能在那裡執行的操作。
• 載入器可以使用 options 物件進行設定（使用 query 參數設定選項仍然受支援，但已不建議使用）。
• 一般模組除了透過 package.json 中的 main 外，還可以透過 loader 欄位匯出載入器。
• 外掛可以提供載入器更多功能。
• 載入器可以發出其他任意檔案。

載入器提供一種透過其前處理函式自訂輸出的方式。使用者現在有更大的彈性可以包含細緻的邏輯，例如壓縮、封裝、語言翻譯和 更多。

解析載入器

載入器遵循標準的 模組解析。在大多數情況下，它將從 模組路徑 載入（想想 npm install、node_modules）。

載入器模組預期會匯出一個函式，並以與 Node.js 相容的 JavaScript 編寫。它們最常透過 npm 管理，但你也可以在應用程式中將自訂載入器作為檔案。根據慣例，載入器通常命名為 xxx-loader（例如 json-loader）。有關更多資訊，請參閱 "撰寫載入器"。