#Output files

This section introduces the output file directory structure and explains how to control the output directory for different file types.

If you want to know how to deploy the build outputs of Rsbuild as a static site, please refer to Deploy Static Site.

#Default directory structure

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

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 the JS file with a .LICENSE.txt suffix.
• Source map files: contain source code 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, rather than writing them to disk. This reduces filesystem operation overhead. Refer to View Static Assets to see all static assets generated in the current build.

To write output files to disk (typically used for inspecting build artifacts or configuring proxy rules for static assets), set the dev.writeToDisk configuration to true:

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

#Modify the output directory

Rsbuild provides several configuration options to modify the directory or filename:

• 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

When importing static assets such as images, SVG, fonts, media, etc., in your code, they are written to the dist/static directory and automatically organized into subdirectories by file type:

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

Use the output.distPath config to write these 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

When the output.target of Rsbuild is 'node', Rsbuild will generate output files for Node.js:

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

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

Modify the output path of Node.js files using the environments config.

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 the directory

For a flatter directory structure, set any directory to an empty string to flatten the generated output structure.

Here's an example:

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

This configuration will generate the following directory structure:

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