close
ガイド
設定
プラグイン
API
ブログ
Rspackについて
貢献する
ガイド
設定
プラグイン
API
ブログ
Rspackについて
貢献する

ローダー

バンドルの用語では、ローダーはプラグインに似ていますが、ファイルの内容を変換する役割を担います。ローダーを使用すると、任意の入力ファイルを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処理方法を使用して後処理を行うように指示できます。

複数のローダーの組み合わせ

特定の ルール の一致に対して複数のローダーをチェーンできます。ローダーは右から左の順に実行されます。

たとえば、less-loader を使用してLessからCSSタイプへの変換を行い、postcss-loader を使用して変換されたソースコードに対して2次変換を実行できます。これは、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の目的は、各モジュールのヘッダーにライセンス通知などのバナーコメントを付加することです。

/**
 * 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 ファイルにバナーを追加する場合、設定は次のようになります。

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

詳細については、loader-api を参照してください。

組み込みローダーの使用

組み込みローダーは、JSローダーの構成可能性を犠牲にすることなく、JSローダーよりも優れたパフォーマンスを提供します。以下は、いくつかの組み込みローダーです。