Loader

Loader 可以对文件内容进行转换，你可以借助 Loader，将 Rspack 中非一等公民支持的文件转换为一等公民类型，以被 Rspack 所正确识别。

TIP

Loader 属于对资源的前处理，而 Rule.type 则属于对资源的后处理，后者定义了 Rspack 支持的一等公民类型。

目前 Rspack 已经支持了社区几乎所有的 loader。如果你发现有不支持的 loader，欢迎通过 GitHub Issues 与我们交流。

开发 Loader

参考 Loader API - 示例 了解如何开发一个 Loader。

示例

使用 Less

CSS 为 Rspack 的一等公民，因此对于 CSS 文件的处理是原生支持的。而对于 Less 文件来说，则需要借助外部的 less-loader 对文件的内容做相应的转换：

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.less$/,
  6.         use: [
  7.           {
  8.             loader: 'less-loader',
  9.           },
  10.         ],
  11.         type: 'css',
  12.       },
  13.     ],
  14.   },
  15. };

less-loader 可以将 Less 文件转换为 Rspack 支持的 CSS 模块类型，因此你可以设置 type 为 'css' 以指示 Rspack 使用原生支持的 CSS 策略进行后处理。

使用多个 Loader

你可以对特定的 Rule 匹配项使用多个 loader 进行链式处理，loader 的执行顺序为从右往左。

例如，你可以使用 less-loader 完成 Less 到 CSS 类型之间的转换，并对转换后的源码使用 postcss-loader 进行二次转换，并最终交给 Rspack 的 CSS 后处理器，完成进一步处理：

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.less$/,
  6.         use: [
  7.           {
  8.             loader: 'postcss-loader',
  9.           },
  10.           {
  11.             loader: 'less-loader',
  12.           },
  13.         ],
  14.         type: 'css',
  15.       },
  16.     ],
  17.   },
  18. };

传递配置项

你可以使用 Rule.use 给 loader 传递相关配置，例如：

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.css$/,
  6.         use: [
  7.           {
  8.             loader: 'postcss-loader',
  9.             options: {
  10.               postcssOptions: {
  11.                 // ...
  12.               },
  13.             },
  14.           },
  15.         ],
  16.         type: 'css',
  17.       },
  18.     ],
  19.   },
  20. };

使用自定义 Loader

你可以在 Rspack 中使用自定义 loader，下面我们会编写一个简单的 banner-loader 作为示例。

banner-loader 的作用是在每个模块的头部添加一个 banner 注释，例如添加一段 License 信息：

  1. /**
  2.  * MIT Licensed
  3.  * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
  4.  * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
  5.  */

在项目的根目录新建一个 banner-loader.js 的文件，内容如下：

banner-loader.js

  1. const BANNER = `/**
  2.  * MIT Licensed
  3.  * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
  4.  * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
  5.  */`;
  7. module.exports = function (content) {
  8.   return `${BANNER}\n${content}`;
  9. };

Loader 的第一个入参为文件的内容，我们可以在这里对文件内容进行处理，然后返回处理后的内容。编写完后，我们需要将这个 loader 使用 CommonJS 风格进行导出。

上述示例中，我们会在所有匹配的文件的头部添加一个 banner 注释，如果我们希望将这个行为匹配所有以 js 结尾的文件，我们可以这样配置：

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.js$/,
  6.         loader: require.resolve('./banner-loader.js'),
  7.       },
  8.     ],
  9.   },
  10. };

更多关于 Loader API 的信息，请参考 loader-api

使用内置 Loader

内置 Loader 在不损失 JS Loader 的可组合性的同时，提供了比 JS Loader 更优的性能。一些内置的 Loader 包括：