#output.filename

• Type:

type FilenameConfig = {
  html?: string;
  js?: string | Function;
  css?: string | Function;
  svg?: string | Function;
  font?: string | Function;
  wasm?: string;
  image?: string | Function;
  media?: string | Function;
  assets?: string | Function;
};

• Default:

// Development mode
const devDefaultFilename = {
  html: '[name].html',
  js: '[name].js',
  css: '[name].css',
  svg: '[name].[contenthash:10].svg',
  font: '[name].[contenthash:10][ext]',
  wasm: '[contenthash:10].module.wasm',
  image: '[name].[contenthash:10][ext]',
  media: '[name].[contenthash:10][ext]',
  assets: '[name].[contenthash:10][ext]',
};

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

Set the filename of output files.

After a production build, Rsbuild adds a hash to the filename by default. To disable this behavior, set output.filenameHash to false.

#File types

output.filename can be set differently for different file types.

Each output.filename option controls different file types:

• html: The name of the HTML files.
• js: The name of the JavaScript files.
• css: The name of the CSS files.
• svg: The name of the SVG images.
• font: The name of the font files.
• wasm: The name of the Wasm files.
• image: The name of non-SVG images.
• media: The name of media assets, such as video.
• assets: The name of other static assets, such as the assets defined in Extend Asset Types.

#Example

To set the name of the JavaScript files to [name]_script.js:

export default {
  output: {
    filename: {
      js: '[name]_script.js',
    },
  },
};

Set different filenames for development and production builds:

const isProd = process.env.NODE_ENV === 'production';

export default {
  output: {
    filename: {
      js: isProd ? '[name]_script.[contenthash:10].js' : '[name]_script.js',
    },
  },
};

#Filename placeholders

In output.filename, you can use filename placeholders to dynamically generate file names.

Common filename placeholders include:

• [name] - chunk name for JavaScript and CSS, entry name for HTML, or the original filename without its extension for other assets.
• [contenthash] - hash value generated based on file content.
• [contenthash:<length>] - hash value generated based on file content, with specified hash length.
• [ext] - file extension, including the dot.

For more filename placeholders, refer to Rspack - Filename placeholders.

#Filename of async modules

When you import a module via dynamic import, the module will be bundled into a separate file using these default naming rules:

• In development mode, the filename will be generated based on the module path, such as dist/static/js/async/src_add_ts.js.
• In production mode, filenames use short chunk IDs generated from hashes by default, such as dist/static/js/async/a1b.27e3083eab.js. This keeps filenames short and avoids directly exposing source paths.

const { add } = await import('./add.ts');

To specify a fixed name for the async module, use the magic comments supported by Rspack. Use rspackChunkName to specify the module name:

const { add } = await import(/* rspackChunkName: "my-chunk-name" */ './add.ts');

This sets the name part of the filename to my-chunk-name. Production builds still append a content hash by default, for example dist/static/js/async/my-chunk-name.27e3083eab.js.

#Using function

You can pass a function to dynamically set the filename based on the file information.

The function receives two parameters:

• pathData: An object containing file path information.
• assetInfo: An optional object containing additional assets information.

Dynamically set the filename for JavaScript files:

const isProd = process.env.NODE_ENV === 'production';

export default {
  output: {
    filename: {
      js: (pathData, assetInfo) => {
        console.log(pathData); // You can check the contents of pathData here

        if (pathData.chunk?.name === 'index') {
          return isProd ? '[name].[contenthash:10].js' : '[name].js';
        }
        return '/some-path/[name].js';
      },
    },
  },
};

Dynamically set the filename for CSS files:

const isProd = process.env.NODE_ENV === 'production';

export default {
  output: {
    filename: {
      css: (pathData, assetInfo) => {
        if (pathData.chunk?.name === 'index') {
          return isProd ? '[name].[contenthash:10].css' : '[name].css';
        }
        return '/some-path/[name].css';
      },
    },
  },
};

Dynamically set the filename for image files:

export default {
  output: {
    filename: {
      image: (pathData) => {
        if (pathData.filename?.includes('foo')) {
          return '/foo/[name][ext]';
        }
        return '/bar/[name][ext]';
      },
    },
  },
};

#Query hash

To generate hash values on the URL query of assets, refer to:

const isProd = process.env.NODE_ENV === 'production';

export default {
  output: {
    filename: {
      js: isProd ? '[name].js?v=[contenthash:10]' : `[name].js`,
      css: isProd ? '[name].css?v=[contenthash:10]' : `[name].css`,
    },
  },
};

In this case, the filenames of JS and CSS will not include a hash, but the URLs in the HTML will contain a hash query.

<!DOCTYPE html>
<html>
  <head>
    <script defer src="/static/js/index.js?v=b8565050ab"></script>
    <link href="/static/css/index.css?v=02d157caab" rel="stylesheet" />
  </head>
</html>