资源模块#

资产（例如图像、字体、视频等）是 Rspack 的一等公民，这意味着你不需要任何加载器来处理它们。与其他模块类型不同，资产通常是独立存在的，因此它们以模块为粒度进行生成。

支持的资源模块类型#

• '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'
      },
    ],
  },
};

将优化器用作加载器#

有时候我们想优化特定的图像，例如压缩其大小。我们仍然可以使用这些加载器。

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