Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community
WARNING

In Modern.js dev command or use Modern.js server deployment, don't modify the html output filename. This will cause the page to be 404.

In common, you don't need to modify the html filename. If you want modify main.html to index.html, using source.mainEntryName.

output.filename

  • Type:
type FilenameConfig = {
  js?:
    | string
    | ((pathData: Rspack.PathData, assetInfo: Rspack.JsAssetInfo) => string);
  css?: string;
  svg?: string;
  font?: string;
  image?: string;
  media?: string;
  assets?: string;
};
  • Default:
// Development mode
const devDefaultFilename = {
  js: '[name].js',
  css: '[name].css',
  svg: '[name].[contenthash:8].svg',
  font: '[name].[contenthash:8][ext]',
  image: '[name].[contenthash:8][ext]',
  media: '[name].[contenthash:8][ext]',
  assets: '[name].[contenthash:8][ext]',
};

// Production mode
const prodDefaultFilename = {
  js: output.target === 'node' ? '[name].js' : '[name].[contenthash:8].js',
  css: '[name].[contenthash:8].css',
  svg: '[name].[contenthash:8].svg',
  font: '[name].[contenthash:8][ext]',
  image: '[name].[contenthash:8][ext]',
  media: '[name].[contenthash:8][ext]',
  assets: '[name].[contenthash:8][ext]',
};

Sets the filename of dist files.

INFO

The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to Rsbuild - output.filename.