Loader
在打包術語中，loader 就像外掛，但任務是轉換檔案內容。您可以使用 loader 將任意輸入檔案轉換為 Rspack 原生支援的檔案類型。
提示
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 模組類型，因此您可以將類型設定為 '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。在下面的範例中，我們將使用 loader API 來撰寫簡單的 banner-loader。
banner-loader 的目的是在每個模組的標頭中加上橫幅註解，例如許可證通知
/**
* 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 的第一個輸入是檔案的內容，讓我們能夠處理檔案內容並傳回轉換後的結果。必須使用 CommonJS require() 匯入指令碼檔案。
例如，若要將橫幅新增至所有 *.js 檔案，組態可能如下所示
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
loader: require.resolve('./banner-loader.js'),
},
],
},
};
如需詳細資訊，您可以參考 loader-api
使用內建 Loader
內建 Loader 與 JS Loader 相比，效能更優異，且不犧牲 JS Loader 的可組合性。以下是一些內建 loader。
