アセットモジュール#

アセット（画像、フォント、動画など）はRspackのファーストクラスオブジェクトです。つまり、処理するためにローダーは必要ありません。他のモジュールタイプとは異なり、アセットは通常単独で存在するため、モジュールの粒度で生成されます。

サポートされているアセットモジュールタイプ#

• 'asset/inline': アセットをBase64エンコーディングを使用してDataURIに変換します。現時点では、エンコーディングの設定はサポートされていません。
• 'asset/resource': アセットを別のファイルに変換し、URLアドレスをエクスポートします。
• 'asset':
  • 設定に応じて、アセットのサイズに応じて'asset/inline'または'asset/resource'を自動的に選択します
  • デフォルトでは、アセットサイズが8096バイト以下の場合、'asset/inline'メカニズムが適用されます。それ以外の場合は、'asset/resource'メカニズムが使用されます。
• 'asset/source': アセットファイルを変換し、生の文字列としてエクスポートします。

例#

条件に基づいてメカニズムを自動的に選択するためにtype: 'asset'を使用する#

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      },
    ],
  },
};

デフォルトでは、アセットサイズが8096バイト以下の場合、'asset/inline'メカニズムが適用されます。それ以外の場合は、'asset/resource'ポリシーが使用されます。

この動作を変更する場合は、module.parser.asset.dataUrlConditionを使用してグローバル設定を変更するか、Rule.parser.dataUrlConditionを使用して、特定の対象モジュールに対して個別に設定できます。

url-loaderをtype: 'asset/inline'に置き換える#

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'url-loader',
-         },
-       ],
+       type: 'asset/inline'
      },
    ],
  },
};

file-loaderをtype: 'asset/resource'に置き換える#

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'file-loader',
-         },
-       ],
+       type: 'asset/resource'
      },
    ],
  },
};

raw-loaderをtype: 'asset/source'に置き換える#

module.exports = {
  module: {
    rules: [
      {
        resourceQuery: /raw/,
-       use: [
-         {
-           loader: 'raw-loader',
-         },
-       ],
+       type: 'asset/source'
      },
    ],
  },
};

オプティマイザーをローダーとして使用する#

特定の画像を最適化したい場合があります。たとえば、サイズを圧縮する場合などです。これらのローダーは引き続き使用できます。

たとえば、image-minimizer-webpack-pluginを使用して、.pngで終わるすべてのファイルを最適化します。

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        use: [
          {
            loader: ImageMinimizerPlugin.loader,
            options: {
              // ...
            },
          },
        ],
        type: 'asset/resource',
      },
    ],
  },
};

上記の条件では、type: 'asset/resource'を使用しています。これにより、Rspackはすべての一致するファイルの個々のファイル生成を完了し、最終的なアセットのURLアドレスを返します。