Webpack Loader

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 ?import? 或 "load(加載)" 模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的得力方式。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript 或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 ?import? CSS 文件！

示例

例如，你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉(zhuǎn)為 JavaScript。為此，首先安裝相對(duì)應(yīng)的 loader：

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

然后指示 webpack 對(duì)每個(gè) ?.css? 使用 ?css-loader?，以及對(duì)所有 ?.ts? 文件使用 ?ts-loader?：

webpack.config.js

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

使用 loader

在你的應(yīng)用程序中，有兩種使用 loader 的方式：

• 配置方式（推薦）：在 webpack.config.js 文件中指定 loader。
• 內(nèi)聯(lián)方式：在每個(gè) ?import? 語句中顯式指定 loader。

注意在 webpack v4 版本可以通過 CLI 使用 loader，但是在 webpack v5 中被棄用。

Configuration

?module.rules? 允許你在 webpack 配置中指定多個(gè) loader。 這種方式是展示 loader 的一種簡(jiǎn)明方式，并且有助于使代碼變得簡(jiǎn)潔和易于維護(hù)。同時(shí)讓你對(duì)各個(gè) loader 有個(gè)全局概覽：

loader 從右到左（或從下到上）地取值(evaluate)/執(zhí)行(execute)。在下面的示例中，從 sass-loader 開始執(zhí)行，然后繼續(xù)執(zhí)行 css-loader，最后以 style-loader 為結(jié)束。查看 loader 功能 章節(jié)，了解有關(guān) loader 順序的更多信息。

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

內(nèi)聯(lián)方式

可以在 ?import? 語句或任何 與 "import" 方法同等的引用方式 中指定 loader。使用 ?!? 將資源中的 loader 分開。每個(gè)部分都會(huì)相對(duì)于當(dāng)前目錄解析。

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

通過為內(nèi)聯(lián) ?import? 語句添加前綴，可以覆蓋配置中的所有 loader, preLoader 和 postLoader：

• 使用 ?!? 前綴，將禁用所有已配置的 normal loader(普通 loader)

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

• 使用 ?!!? 前綴，將禁用所有已配置的 loader（preLoader, loader, postLoader）

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

• 使用 ?-!? 前綴，將禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

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

選項(xiàng)可以傳遞查詢參數(shù)，例如 ??key=value&foo=bar?，或者一個(gè) JSON 對(duì)象，例如 ??{"key":"value","foo":"bar"}?。

loader 特性

• loader 支持鏈?zhǔn)秸{(diào)用。鏈中的每個(gè) loader 會(huì)將轉(zhuǎn)換應(yīng)用在已處理過的資源上。一組鏈?zhǔn)降?loader 將按照相反的順序執(zhí)行。鏈中的第一個(gè) loader 將其結(jié)果（也就是應(yīng)用過轉(zhuǎn)換后的資源）傳遞給下一個(gè) loader，依此類推。最后，鏈中的最后一個(gè) loader，返回 webpack 所期望的 JavaScript。
• loader 可以是同步的，也可以是異步的。
• loader 運(yùn)行在 ?Node.js? 中，并且能夠執(zhí)行任何操作。
• loader 可以通過 ?options? 對(duì)象配置（仍然支持使用 ?query? 參數(shù)來設(shè)置選項(xiàng)，但是這種方式已被廢棄）。
• 除了常見的通過 ?package.json? 的 ?main? 來將一個(gè) npm 模塊導(dǎo)出為 loader，還可以在 module.rules 中使用 loader 字段直接引用一個(gè)模塊。
• 插件(plugin)可以為 loader 帶來更多特性。
• loader 能夠產(chǎn)生額外的任意文件。

可以通過 loader 的預(yù)處理函數(shù)，為 JavaScript 生態(tài)系統(tǒng)提供更多能力。用戶現(xiàn)在可以更加靈活地引入細(xì)粒度邏輯，例如：壓縮、打包、語言轉(zhuǎn)譯（或編譯）和 更多其他特性。

解析 loader

loader 遵循標(biāo)準(zhǔn) 模塊解析 規(guī)則。多數(shù)情況下，loader 將從 模塊路徑 加載（通常是從 ?npm? ?install?, ?node_modules? 進(jìn)行加載）。

我們預(yù)期 loader 模塊導(dǎo)出為一個(gè)函數(shù)，并且編寫為 Node.js 兼容的 JavaScript。通常使用 npm 進(jìn)行管理 loader，但是也可以將應(yīng)用程序中的文件作為自定義 loader。按照約定，loader 通常被命名為 ?xxx-loader?（例如 ?json-loader?）。更多詳細(xì)信息，請(qǐng)查看 編寫一個(gè) loader。