#dev.assetPrefix

• Type: boolean | string | 'auto'
• Default: server.base

Set the URL prefix of static assets in development mode.

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 development mode. In production mode or none mode, use output.assetPrefix to configure the URL prefix.

#Default value

The default value of dev.assetPrefix is the same as server.base.

When server.base is /foo, index.html and other static assets can be accessed through http://localhost:3000/foo/.

It should be noted that when customizing the dev.assetPrefix option, if you want static assets to be normally accessible through the Rsbuild dev server, dev.assetPrefix should contain the same URL prefix as server.base. For example:

export default {
  dev: {
    assetPrefix: '/foo/bar/',
  },
  server: {
    base: '/foo',
  },
};

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

#Port placeholder

The port number that Rsbuild server listens on may change. For example, if the port is in use, Rsbuild will automatically increment the port number until it finds an available port.

To avoid dev.assetPrefix becoming invalid due to port changes, you can use one of the following methods:

• Enable server.strictPort.
• Use the <port> placeholder to refer to the current port number. Rsbuild will replace the placeholder with the actual port number it is listening on.

export default {
  dev: {
    assetPrefix: 'http://localhost:<port>/',
  },
};

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

#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 in development mode.
• dev.assetPrefix default value is the same as server.base.
• 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).

#Dynamic asset prefix

Use the __webpack_public_path__ variable provided by Rspack to dynamically set the URL prefix of static assets in JavaScript code.

See Rspack - Dynamically set publicPath.