output.assetPrefix#

• Type: string | 'auto'
• Default: '/'

In production mode, use this option to set the URL prefix for static assets, such as setting it to a CDN URL.

assetPrefix will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.

This config is only used in production mode. In development mode, please use the dev.assetPrefix to set the URL prefix.

Example#

Setting output.assetPrefix will add the value as a prefix to the URLs of all static assets like JavaScript, CSS, images, etc.

• For example, setting it to a CDN address:

export default {
  output: {
    assetPrefix: 'https://cdn.example.com/assets/',
  },
};

After the build, the URL of the JS file will be:

<script
  defer
  src="https://cdn.example.com/assets/static/js/index.ebc4ff4f.js"
></script>

• Setting it to a relative path:

export default {
  output: {
    assetPrefix: './',
  },
};

After the build, the URL of the JS file will be:

<script defer src="./static/js/index.ebc4ff4f.js"></script>

Path Types#

assetPrefix can be set to the following types of paths:

• absolute path: This is the most common practice, can be specific server paths, like /assets/, or setting to CDN paths, like https://cdn.example.com/assets/.
• relative path: such as ./assets/.
• 'auto': Rspack will automatically calculate the path and generate relative paths based on file location.

Compare with publicPath#

The functionality of output.assetPrefix is basically the same as the output.publicPath config in Rspack.

The differences from the native configuration are as follows:

• output.assetPrefix only takes effect in production mode.
• output.assetPrefix automatically appends a trailing / by default.
• The value of output.assetPrefix is written to the process.env.ASSET_PREFIX environment variable (can only be accessed in client code).