CC 4.0 ライセンス
このセクションの内容は、以下のリンクの内容に由来し、CC BY 4.0 ライセンスに従います。
特に明記されていない場合、以下の内容は、元の内容に基づいて修正および削除された結果であると想定できます。
例
以下のセクションでは、さまざまなタイプのローダーの基本的な例をいくつか示します。mapおよびmetaパラメータはオプションであることに注意してください。以下のthis.callbackを参照してください。
同期ローダー
変換されたcontentを同期的に返すには、returnまたはthis.callbackを使用できます
sync-loader.js
module.exports = function (content, map, meta) {
return someSyncOperation(content);
};
this.callbackメソッドは、contentのみとは対照的に、複数の引数を渡すことができるため、より柔軟性があります。
sync-loader-with-multiple-results.js
module.exports = function (content, map, meta) {
this.callback(null, someSyncOperation(content), map, meta);
return; // always return undefined when calling callback()
};
情報
Rspackは、技術的およびパフォーマンス上の理由から、内部的には同期ローダーであるかどうかに関係なく、ローダーを非同期に変換します。
非同期ローダー
非同期ローダーの場合、this.asyncを使用してcallback関数を取得します
async-loader.js
module.exports = function (content, map, meta) {
var callback = this.async();
someAsyncOperation(content, function (err, result) {
if (err) return callback(err);
callback(null, result, map, meta);
});
};
async-loader-with-multiple-results.js
module.exports = function (content, map, meta) {
var callback = this.async();
someAsyncOperation(content, function (err, result, sourceMaps, meta) {
if (err) return callback(err);
callback(null, result, sourceMaps, meta);
});
};
'Raw'ローダー
デフォルトでは、リソースファイルはUTF-8文字列に変換され、ローダーに渡されます。ローダーはrawをtrueに設定することで、生のBufferを受信できます。各ローダーは、処理結果をStringまたはBufferとして渡すことができ、Rspackコンパイラはそれらをローダーとの間で変換します。
raw-loader.js
module.exports = function (content) {
assert(content instanceof Buffer);
// ...
};
module.exports.raw = true;
ピッチングローダー
ローダーは常に右から左に呼び出されます。ローダーがリクエストの背後にあるメタデータのみを気にし、前のローダーの結果を無視できる場合があります。ローダーのpitchメソッドは、ローダーが実際に実行される前に（右から左に）、左から右に呼び出されます。
useの次の構成の場合
rspack.config.js
module.exports = {
//...
module: {
rules: [
{
//...
use: ['a-loader', 'b-loader', 'c-loader'],
},
],
},
};
これらの手順が発生します
|- a-loader `pitch` |- b-loader `pitch` |- c-loader `pitch` |- リクエストされたモジュールが依存関係として選択されます |- c-loader の通常実行 |- b-loader の通常実行 |- a-loader の通常実行
通常、ローダーが通常ステージフックのみをエクスポートするほど単純な場合
module.exports = function (source) {};
次に、ピッチングステージはスキップされます。
では、なぜローダーは「ピッチング」フェーズを利用するのでしょうか？
まず、ピッチメソッドに渡されるデータは、this.dataの下で実行フェーズにも公開され、サイクルのできるだけ早い段階から情報をキャプチャして共有するのに役立つ可能性があります。
module.exports = function (content) {
return someSyncOperation(content, this.data.value);
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
data.value = 42;
};
第二に、ローダーがピッチメソッドで結果を提供する場合、プロセスは反転し、残りのローダーをスキップします。上記の例では、b-ローダーのピッチメソッドが何かを返した場合
module.exports = function (content) {
return someSyncOperation(content);
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
if (someCondition()) {
return (
'module.exports = require(' +
JSON.stringify('-!' + remainingRequest) +
');'
);
}
};
上記の手順は次のように短縮されます
|- a-loader `pitch` |- b-loader `pitch` がモジュールを返す |- a-loader の通常実行
実際の例として、style-loaderは、リクエストをディスパッチするために2番目の利点を活用します。詳細については、style-loaderをご覧ください。
