加载器
在打包术语中，加载器类似于插件，但它的任务是转换文件内容。您可以使用加载器将任意输入文件转换为 Rspack 原生支持的文件类型。
提示
加载器对资源执行预处理，而配置 Rule.type 描述了对 Rspack 原生支持的资源类型的后处理。
Rspack 支持大多数社区加载器。如果您发现不支持的加载器，请随时通过 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 模块类型，因此您可以将类型设置为 'css' 来指示 Rspack 使用原生支持的后处理 CSS 处理方法。
组合多个加载器
您可以为特定 Rule 匹配链接多个加载器，加载器按从右到左的顺序执行。
例如，您可以使用 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 将相关配置传递给加载器，例如
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
// ...
},
},
},
],
type: 'css',
},
],
},
};
使用自定义加载器
您可以使用 Rspack 的自定义加载器。在下面的示例中，我们将使用加载器 API 来编写一个简单的 banner-loader。
banner-loader 的目的是在每个模块的标题处添加一个 banner 注释，例如许可证通知
/**
* 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}`;
};
此加载器的第一个输入是文件的内容，它允许我们处理文件内容并返回转换后的结果。脚本文件必须使用 CommonJS require() 导入。
例如，要为所有 *.js 文件添加 banner，配置可能如下所示
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
loader: require.resolve('./banner-loader.js'),
},
],
},
};
有关详细信息，您可以参考 loader-api
使用内置加载器
内置加载器与 JS 加载器相比具有更好的性能，同时不牺牲 JS 加载器的可组合性。以下是一些内置加载器。
