加载器(Loader)

加载器用于对模块源代码进行转换。它们允许你在 import 或“加载”文件时预处理文件。因此,加载器有点像其他构建工具中的“任务”,并提供了一种强有力的方式来处理前端的构建步骤。加载器可以将文件从不同的语言(如TypeScript)转换为 JavaScript,或将内联图像转换为数据 URL。加载器甚至允许你直接从 JavaScript 模块导入 CSS 文件!

示例

例如,你可以使用加载器告诉 webpack 加载一个 CSS 文件或将 TypeScript 转换为 JavaScript。要做到这一点,你首先要安装所需的加载器:

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

然后指示 webpack 将 css-loader 应用于每个 .css 文件,将 ts-loader 应用于所有 .ts 文件:

webpack.config.js

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

使用加载器

在你的应用程序中使用加载器的方法有三种:

  • 配置(推荐):在 webpack.config.js 文件中指定它们。
  • 内联:在每条 import 语句中明确指定它们。
  • CLI:在 shell 命令中指定它们。

配置

选项 module.rules 允许你在 webpack 配置中指定多个加载器。这是一种展示加载器的简洁方式,有助于维护整洁的代码。同时让你对每个加载器都有个全面的了解:

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

内联

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

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

可以通过在整个规则前加上 ! 来覆盖配置中的任意加载器。

可以使用查询参数来传递选项,比如 ?key=value&foo=bar,或者一个 JSON 对象,比如 ?{"key":"value","foo":"bar"}

尽可能使用 module.rules,因为这将减少源代码中的引用,并允许你在出现问题时更快地调试或定位加载器。

CLI

你也可以通过 CLI 来使用加载器:

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

这将对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loadercss-loader

加载器特性

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

加载器通过其预处理功能,为 JavaScript 生态系统提供了更多能力。用户现在可以更灵活地包含细粒度逻辑,如压缩、打包、语言翻译等。

解析加载器

加载器遵循标准的 模块解析。在大多数情况下,它将从模块路径加载(想想 npm installnode_modules)。

一个加载器模块应该导出一个函数,并用 Node.js 兼容的 JavaScript 编写。它们通常使用 npm 进行管理,但你也可以把自定义加载器当作应用程序中的文件。按照约定,加载器通常被命名为 xxx-loader(例如 json-loader)。请参阅 “如何编写加载器?” 了解更多信息。