> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 资源模块

Rspack 内置了对资源（如：图片、字体、视频等）的支持，这意味着你不需要任何的 Loader 来处理这些文件。

与其他模块类型不同，资源文件通常独立存在，因此它们是以模块为粒度进行生成的。

:::tip Module 与 Chunk

其他模块类型例如 JavaScript 模块，它们通常会合并成一个 Chunk 做最后的生成。而对于资源模块来说，它几乎无法被 Bundle，因此资源模块通常是独立存在的。这也是为什么叫“资源模块”的一个最直接的原因。

:::

## 支持的 Asset module 类型

- **`'asset/inline'`**: 将资源转换为 DataURI，使用 Base64 编码，暂不支持编码配置。
- **`'asset/resource'`**: 将资源转换为单独的文件，并且导出产物地址。
- **`'asset'`**:
  - 根据条件（如：资源的体积）自动选择 `'asset/inline'` 或 `'asset/resource'`。
  - 默认如果资源体积小于等于 8096 bytes，则使用 `'asset/inline'` 策略，否则使用 `'asset/resource'` 策略。
- **`'asset/source'`**: 将资源文件转为字符串导出。
- **`'asset/bytes'`**: 将资源文件转为二进制数据 `Uint8Array` 导出。

## 示例

### 使用 `type: 'asset'`

使用 `type: 'asset'` 根据条件自动选择策略：

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      },
    ],
  },
};
```

默认情况下，如果资源体积小于等于 8096 bytes，则使用 `'asset/inline'` 策略，否则使用 `'asset/resource'` 策略。

如果你希望修改这个行为，可以使用 [module.parser.asset.dataUrlCondition](/zh/config/module-parser.md#asset) 来修改全局的配置，或使用 [rules\[\].parser.dataUrlCondition](/zh/config/module-parser.md#assetdataurlcondition) 对特定符合条件的模块单独配置。

### 替换 `url-loader`

使用 `type: 'asset/inline'` 替换 `url-loader`：

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'url-loader',
-         },
-       ],
+       type: 'asset/inline'
      },
    ],
  },
};
```

### 替换 `file-loader`

使用 `type: 'asset/resource'` 替换 `file-loader`：

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.png$/,
-       use: [
-         {
-           loader: 'file-loader',
-         },
-       ],
+       type: 'asset/resource'
      },
    ],
  },
};
```

### 替换 `raw-loader`

使用 `type: 'asset/source'` 替换 `raw-loader`：

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        resourceQuery: /raw/,
-       use: [
-         {
-           loader: 'raw-loader',
-         },
-       ],
+       type: 'asset/source'
      },
    ],
  },
};
```

### 使用 Optimizer loader

有些时候我们希望对特定的图片进行优化，比如压缩图片的体积。我们仍旧可以使用这些 Loader。

例如对所有 `.png` 结尾的文件使用 [image-minimizer-webpack-plugin](https://github.com/webpack/image-minimizer-webpack-plugin) 进行优化：

```js title="rspack.config.mjs"
import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';

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

上述条件中使用了 `type: 'asset/resource'`，这会引导 Rspack 对所有匹配的文件完成单独的文件生成，并返回最终的产物地址。