#Output files

This section introduces the output file directory structure and 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 following section shows the basic output file directory structure. By default, compiled files are output to the dist directory of 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 files, JS files, and CSS files:

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

Additionally, JS files and CSS files sometimes generate related files:

• License files: contain open source licenses, output to the same directory as the JS file with a .LICENSE.txt suffix.
• Source map files: contain source code mappings, output to the same directory as JS files 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 the 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. You can refer to View Static Assets to view all static assets generated in the current build.

You can choose to write output files to disk, which is typically used for inspecting build artifacts or configuring proxy rules for static assets.

Just 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:

• Modify the filename through output.filename.
• Modify the output path through output.distPath.
• Modify the license file output through output.legalComments.
• Modify source map output through output.sourceMap.
• Modify the output structure of the HTML files through html.outputStructure.

#Static assets

When you import static assets such as images, SVG, fonts, media, etc., in the code, they will also be output to the dist/static directory, and automatically assigned to the corresponding subdirectories according to the file type:

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

You can use the output.distPath config to output these static assets to a single directory, for example, output to the assets directory:

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

The above config will generate 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 usually only contain JS files, no HTML or CSS. The JS file names will not contain hash.

You can modify the output path of Node.js files via the environments config.

For example, output 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

If you prefer a flatter directory structure in the dist directory, you can set the directory to an empty string to flatten the generated directory.

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