Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute

Asset modules

Assets (e.g. images, fonts, videos, etc.) are first-class citizens of Rspack, which means you don't need any loader to process them. Unlike other module types, assets usually stand alone, so they are generated at the granularity of a module.

Module and Chunk

Other module types, such as JavaScript modules, are usually bundled into one or more chunks for final bundle generation. In the case of asset modules, it is almost impossible to be bundled, so they usually exist independently. This is one of the most straightforward reasons why it is called a "asset module."

Supported Asset Module types

  • 'asset/inline': Converts an asset to a DataURI, using Base64 encoding, no encoding configuration is supported at this time.
  • 'asset/resource': Converts an asset to a separate file and exports the URL address.
  • 'asset':
    • Automatically selects 'asset/inline' or 'asset/resource' depending on the size of the asset, depending on the configuration
    • By default, the 'asset/inline' mechanism is applied if the asset size is less than or equal to 8096 bytes, otherwise the 'asset/resource' mechanism is used.
  • 'asset/source': Converts and exports the asset file as a raw string.

Example

Using type: 'asset' to automatically select a mechanism based on conditions

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

By default, the 'asset/inline' mechanism is applied if the asset size is less than or equal to 8096 bytes, otherwise the 'asset/resource' policy is used.

If you wish to modify this behavior, you can use module.parser.asset.dataUrlCondition to modify the global configuration, or use Rule.parser. dataUrlCondition to configure it separately for a specific eligible module.

Replacing url-loader with type: 'asset/inline'

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

Replacing file-loader with type: 'asset/resource'

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

Replacing raw-loader with type: 'asset/source'

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

Using optimizers as loaders

There are times when we want to optimize a specific image, for example by compressing its size. We can still use these loaders.

For example, optimizing all files ending in .png with image-minimizer-webpack-plugin:

rspack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

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

The above condition uses type: 'asset/resource', which will direct Rspack to complete individual file generation for all matching files and return the final asset URL address.