dev.assetPrefix

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

Set the URL prefix of static assets during development.

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 during development. In the production build, please use the output.assetPrefix to set the URL prefix.

Boolean Type

If assetPrefix is set to true, the URL prefix will be http://localhost:<port>/:

export default {
  dev: {
    assetPrefix: true,
  },
};

The resource URL loaded in the browser is as follows:

<script defer src="http://localhost:3000/static/js/main.js"></script>

If assetPrefix is set to false or not set, / is used as the default value.

String type

When the value of assetPrefix is a string type, the string will be used as a prefix and automatically appended to the static resource URL.

  • For example, set to a path relative to the root directory:
export default {
  dev: {
    assetPrefix: '/example/',
  },
};

The resource URL loaded in the browser is as follows:

<script defer src="http://localhost:3000/example/static/js/index.js"></script>
  • For example, set to a complete URL:
export default {
  dev: {
    assetPrefix: 'https://example.com/assets/',
  },
};

The resource URL loaded in the browser is as follows:

<script defer src="https://example.com/assets/static/js/index.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/.
  • 'auto': Rspack will automatically calculate the path and generate relative paths based on file location.
TIP

It's not recommended to set assetPrefix as a relative path, such as './assets/'. This is because when assets are at different path depths, using relative paths may cause assets to load incorrectly.

Compare with publicPath

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

The differences from the native configuration are as follows:

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