資源模組#

資源（例如圖片、字體、影片等）是 Rspack 的一等公民，這表示你不需要任何 loader 來處理它們。與其他模組類型不同，資源通常獨立存在，因此它們是以模組的粒度產生的。

支援的資源模組類型#

• 'asset/inline'：將資源轉換為 DataURI，使用 Base64 編碼，目前不支援編碼設定。
• '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 針對特定符合條件的模組單獨設定。

使用 type: 'asset/inline' 取代 url-loader#

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

使用 type: 'asset/resource' 取代 file-loader#

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

使用 type: 'asset/source' 取代 raw-loader#

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

使用最佳化器作為 loaders#

有時候我們希望最佳化特定的圖片，例如壓縮其大小。我們仍然可以使用這些 loaders。

例如，使用 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 位址。