加载器

加载器是对模块的源代码进行转换的工具。它们允许你在 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 语句前加上前缀，可以覆盖配置中的任何加载器、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 和加载器，但不会禁用 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 参数设置选项仍受支持，但已被废弃）。
• 普通模块可以通过 package.json 中的 loader 字段，除了正常的 main 之外，还可以导出一个加载器。
• 插件可以为加载器提供更多功能。
• 加载器可以发出额外的任意文件。

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

解析加载器

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

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