加载器

加载器是对模块源代码应用的转换。它们允许您在import或“加载”文件时预处理文件。因此，加载器有点像其他构建工具中的“任务”，并提供了一种强大的方式来处理前端构建步骤。加载器可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像加载为数据 URL。加载器甚至允许您执行诸如import直接从 JavaScript 模块导入 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 语句前添加前缀来覆盖任何加载器、preLoaders 和 postLoaders，这些加载器、preLoaders 和 postLoaders 来自 配置

• 使用 ! 作为前缀将禁用所有配置的普通加载器

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

• 使用 !! 作为前缀将禁用所有配置的加载器（preLoaders、loaders、postLoaders）

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

• 使用 -! 作为前缀将禁用所有配置的 preLoaders 和 loaders，但不禁用 postLoaders

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

可以使用查询参数（例如 ?key=value&foo=bar）或 JSON 对象（例如 ?{"key":"value","foo":"bar"}）传递选项。

加载器功能

• 加载器可以链接。链中的每个加载器都会对处理过的资源应用转换。链按相反的顺序执行。第一个加载器将其结果（应用了转换的资源）传递给下一个加载器，依此类推。最后，webpack 期望链中最后一个加载器返回 JavaScript。
• 加载器可以是同步的或异步的。
• 加载器在 Node.js 中运行，可以执行 Node.js 中的所有操作。
• 加载器可以使用 options 对象进行配置（使用 query 参数设置选项仍然受支持，但已弃用）。
• 除了正常的 `main` 之外，普通模块还可以通过 `package.json` 中的 `loader` 字段导出一个加载器。
• 插件可以为加载器提供更多功能。
• 加载器可以发出额外的任意文件。

加载器通过其预处理函数提供了一种自定义输出的方式。用户现在可以更灵活地包含细粒度的逻辑，例如压缩、打包、语言翻译和 更多。

解析加载器

加载器遵循标准的 模块解析。在大多数情况下，它将从 模块路径（例如 `npm install`、`node_modules`）加载。

加载器模块应该导出一个函数，并用 Node.js 兼容的 JavaScript 编写。它们最常使用 npm 管理，但您也可以将自定义加载器作为应用程序中的文件。按照惯例，加载器通常命名为 `xxx-loader`（例如 `json-loader`）。有关更多信息，请参阅 "编写加载器"。