Loader 概念

Loader 是应用于模块源代码的转换。它们允许你在 import 或“加载”文件时对文件进行预处理。因此，Loader 有点像其他构建工具中的“任务”，并提供了一种强大的方式来处理前端构建步骤。Loader 可以将来自不同语言（如 TypeScript）的文件转换为 JavaScript，或将内联图像加载为 data URL。Loader 甚至允许你做一些事情，例如直接从 JavaScript 模块中 import CSS 文件！

示例

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件或将 TypeScript 转换为 JavaScript。为此，你首先要安装所需的 loader：

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

然后指示 webpack 对每个 .css 文件使用 css-loader，并对所有 .ts 文件使用 ts-loader：

webpack.config.js

export default {
  module: {
    rules: [
      { test: /\.css$/, use: "css-loader" },
      { test: /\.ts$/, use: "ts-loader" },
    ],
  },
};

虽然前面的示例中我们使用了 loader 来加载 CSS 文件，但 webpack 有一个实验性选项（experiments.css），允许 webpack 处理 CSS 并自动将样式注入到网页中。

使用 Loader

在应用程序中有两种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定它们。
• 内联：在每个 import 语句中显式指定它们。

请注意，在 webpack v4 下可以从 CLI 使用 loader，但该功能在 webpack v5 中已被弃用。

配置

module.rules 允许你在 webpack 配置中指定多个 loader。
这是展示 loader 的一种简洁方式，有助于保持代码整洁。它还可以让你全面了解每个 loader。

Loader 从右到左（或从下到上）进行求值/执行。在下面的示例中，执行从 sass-loader 开始，继续到 css-loader，最后以 style-loader 结束。有关 loader 顺序的更多信息，请参阅 “Loader 特性”。

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

内联

可以在 import 语句或任何 等效的“导入”方法 中指定 loader。使用 ! 将资源与 loader 分隔开。每个部分都相对于当前目录进行解析。

此处展示 loader1!loader2!./file 语法仅供说明。在大多数项目中，更推荐通过 module.rules 配置 loader，并为了副作用而导入样式（例如 import "./styles.css"）。

import * as styles from "style-loader!css-loader?modules!./styles.css";

可以通过在内联 import 语句前添加前缀来覆盖 配置 中的任何 loader、preLoader 和 postLoader：

• 使用 ! 前缀将禁用所有已配置的普通 loader

  js 复制代码

  import * as styles from "!style-loader!css-loader?modules!./styles.css";

• 使用 !! 前缀将禁用所有已配置的 loader（preLoaders、loaders、postLoaders）

  js 复制代码

  import * as styles from "!!style-loader!css-loader?modules!./styles.css";

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

  js 复制代码

  import * as styles from "-!style-loader!css-loader?modules!./styles.css";

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

尽可能使用 module.rules，因为这样可以减少源代码中的样板代码，并且如果出现问题，可以让你更快地调试或定位到特定的 loader。

Loader 特性

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

Loader 通过其预处理函数提供了一种自定义输出的方式。现在用户有了更大的灵活性来包含细粒度的逻辑，例如压缩、打包、语言翻译等更多功能。

解析 Loader

Loader 遵循标准的 模块解析。在大多数情况下，它会从 模块路径 加载（可以想象为 npm install、node_modules）。

Loader 模块需要导出函数，并且使用 Node.js 兼容的 JavaScript 编写。它们通常通过 npm 进行管理，但你也可以将自定义 loader 作为应用程序中的文件。按照惯例，loader 通常命名为 xxx-loader（例如 json-loader）。有关更多信息，请参阅 “编写 Loader”。