close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献
简体中文

Loader

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

TIP

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

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

示例

使用 Less

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

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
          },
        ],
        type: 'css',
      },
    ],
  },
};

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

使用多个 Loader

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

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

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
        type: 'css',
      },
    ],
  },
};

传递配置项

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

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

使用自定义 Loader

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

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

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

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

banner-loader.js
const BANNER = `/**
 * MIT Licensed
 * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
 * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
 */`;

module.exports = function (content) {
  return `${BANNER}\n${content}`;
};

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

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

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: require.resolve('./banner-loader.js'),
      },
    ],
  },
};

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

使用内置 Loader

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