#Asset modules

Rspack has built-in support for assets (e.g. images, fonts, videos, etc.), 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.

#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'

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

export default {
  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

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

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

#Replacing file-loader

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

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

#Replacing raw-loader

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

export default {
  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:

import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';

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

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.