#Output files

This section covers the output file directory structure and how to control output directories for different file types.

To learn about deploying Rsbuild build outputs as a static site, see Deploy Static Site.

#Default directory structure

The default output directory structure is shown below. Output files are written to the dist directory in your project root.

dist
├── static
│   ├── css
│   │   ├── [name].[hash].css
│   │   └── [name].[hash].css.map
│   │
│   └── js
│       ├── [name].[hash].js
│       ├── [name].[hash].js.LICENSE.txt
│       └── [name].[hash].js.map
│
└── [name].html

The most common output files are HTML, JS, and CSS files:

• HTML files: written to the root of the dist directory by default.
• JS files: written to the static/js directory by default.
• CSS files: written to the static/css directory by default.

Additional files may be generated alongside JS and CSS files:

• License files: contain open-source license information, written to the same directory as JS files with a .LICENSE.txt suffix.
• Source map files: contain source mapping information, written to the same directory as JS and CSS files with a .map suffix.

In the filename, [name] represents the entry name for this file, such as index or main. [hash] is a hash value generated based on the file content.

#Development mode output

In development mode, Rsbuild stores build outputs in memory on the dev server by default instead of writing them to disk. This reduces file system overhead. Refer to View Static Assets to see all static assets generated in the current build.

To write output files to disk, which is useful for inspecting build artifacts or configuring proxy rules for static assets, set dev.writeToDisk to true:

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

#Modify the output directory

Rsbuild provides several options to customize output directories or filenames:

• Use output.filename to modify the filename.
• Use output.distPath to modify the output path.
• Use output.legalComments to modify the license file output.
• Use output.sourceMap to modify source map output.
• Use html.outputStructure to modify the output structure of HTML files.

#Static assets

Static assets imported in your code (images, SVG, fonts, media, etc.) are written to the dist/static directory and automatically organized by file type:

dist
└── static
    ├── image
    │   └── foo.[hash].png
    │
    ├── svg
    │   └── bar.[hash].svg
    │
    ├── font
    │   └── baz.[hash].woff2
    │
    └── media
        └── qux.[hash].mp4

Configure output.distPath to write static assets to a single directory. For example, to organize them in an assets directory:

export default {
  output: {
    distPath: {
      image: 'assets',
      svg: 'assets',
      font: 'assets',
      media: 'assets',
    },
  },
};

This configuration generates the following directory structure:

dist
└── assets
    ├── foo.[hash].png
    ├── bar.[hash].svg
    ├── baz.[hash].woff2
    └── qux.[hash].mp4

#Node.js output directory

With output.target set to 'node', Rsbuild generates output files for Node.js:

dist
├── static
└── [name].js

Node.js outputs typically contain only JS files without HTML or CSS. JS filenames do not include hash values.

You can modify the output path for Node.js files using the environments configuration.

For example, to write Node.js files to the server directory:

export default {
  environments: {
    web: {
      output: {
        target: 'web',
      },
    },
    node: {
      output: {
        target: 'node',
        distPath: {
          root: 'dist/server',
        },
      },
    },
  },
};

#Flatten directories

To create a flatter directory structure, set any directory path to an empty string to flatten the output structure.

For example:

export default {
  output: {
    distPath: {
      js: '',
      css: '',
    },
  },
};

This configuration generates the following directory structure:

dist
├── [name].[hash].css
├── [name].[hash].css.map
├── [name].[hash].js
├── [name].[hash].js.map
└── [name].html