output.distPath#

• Type:

type DistPathConfig = {
  root?: string;
  html?: string;
  js?: string;
  jsAsync?: string;
  css?: string;
  cssAsync?: string;
  svg?: string;
  font?: string;
  wasm?: string;
  image?: string;
  media?: string;
  assets?: string;
};

• Default:

const defaultDistPath = {
  root: 'dist',
  html: './',
  js: output.target === 'node' ? '' : 'static/js',
  jsAsync: output.target === 'node' ? '' : 'static/js/async',
  css: 'static/css',
  cssAsync: 'static/css/async',
  svg: 'static/svg',
  font: 'static/font',
  wasm: 'static/wasm',
  image: 'static/image',
  media: 'static/media',
  assets: 'static/assets',
};

Set the directory of the output files. Rsbuild will emit files to the specified subdirectory according to the file type.

See Output files for more information.

File types#

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

Here are the details of each output.distPath option:

• root: The root directory of all output files.
• html: The output directory of HTML files.
• js: The output directory of JavaScript files.
• jsAsync: The output directory of async JavaScript files, which by default will be output to the async subdirectory of distPath.js.
• css: The output directory of CSS style files.
• cssAsync: The output directory of async CSS files, which by default will be output to the async subdirectory of distPath.css.
• svg: The output directory of SVG images.
• font: The output directory of font files.
• wasm: The output directory of WebAssembly files.
• image: The output directory of non-SVG images.
• media: The output directory of media assets, such as videos.
• assets: The output directory of other static assets. Such as the assets defined in Extend Asset Types.

Root directory#

The root is the root directory of the build artifacts and can be specified as a relative or absolute path. If the value of root is a relative path, it will be appended to the project's root directory to form an absolute path.

Other directories can only be specified as relative paths and will be output relative to the root directory.

Example#

The JavaScript files will be output to the distPath.root + distPath.js directory, which is dist/static/js.

To output JavaScript files to the build/resource/js directory, add the following config:

export default {
  output: {
    distPath: {
      root: 'build',
      js: 'resource/js',
    },
  },
};

The above config will generate the following directory structure:

build
├── resource
│   └── js
│       └── index.js
└── index.html