output.target#

• Type:

type RsbuildTarget = 'web' | 'node' | 'web-worker';

• Default: 'web'
• Version: >= 1.0.0

Setting the build target of Rsbuild.

Rsbuild supports multiple build targets for running in different environments. After setting the target type, the default configuration of Rsbuild will change accordingly.

Default Target#

By default, the target is set to 'web' and will build outputs for running in the browser.

Rsbuild will read the Browserslist config in the project to determine the range of browsers.

Optional Targets#

In addition to 'web', target can also be set to the following values:

• 'node': Build for Node.js environment, usually used in SSR or other scenarios.
• 'web-worker': Build for web worker environment.

For example, to build for the Node.js environment:

export default {
  output: {
    target: 'node',
  },
};

Parallel Builds#

You can use environments to build multiple targets in parallel.

For example, to build web outputs and node outputs at the same time:

export default {
  environments: {
    web: {
      output: {
        target: 'web',
      },
    },
    node: {
      output: {
        target: 'node',
      },
    },
  },
};

Node Target#

Refers to the build target running in the Node.js environment, usually used in scenarios such as SSR.

When target is set to 'node', Rsbuild will:

• Set Rspack's target to 'node'.
• No HTML files will be generated, and HTML-related logic will not be executed, since HTML is not required by the Node.js environment.
• The default code split strategy will be disabled, but dynamic import can still work.
• Disable the HMR.
• Set the default value of Browserslist to ['node >= 16'].
• Set the default value of output.emitCss to false. This means that CSS code will not be extracted to separate files, but the id information of CSS Modules will be included in the bundle.

Node Addons#

When target is set to 'node', Rsbuild allows you to import Node.js Addons in JavaScript files.

For example:

import addon from './addon.node';

addon.doSomething();

The referenced addons file will be output to the dist directory:

Web Worker Target#

Refers to the build target running in the Web Worker environment.

When target is set to 'web-worker', Rsbuild will:

• Set Rspack's target to 'webworker'.
• No HTML files will be generated, and HTML-related logic will not be executed, since HTML is not required by the Web Worker environment.
• CSS code will not be bundled or extracted, but the id information of CSS Modules will be included in the bundle (the default value of output.emitCss is false).
• The default code split strategy will be disabled, and dynamic import can not work, because the Web Worker only runs a single JavaScript file.
• Set the default value of output.emitCss to false. This means that CSS code will not be extracted to separate files, but the id information of CSS Modules will be included in the bundle.
• Disable the HMR.

For more information, please refer to: Using Web Workers.

Other targets#

Rspack supports other target types, such as electron-main and electron-renderer.

Rsbuild currently does not support these targets. You can configure these targets using tools.rspack.

For example, setting the target to 'electron-main' will override the default 'web' set by Rsbuild.

export default {
  tools: {
    rspack: {
      target: 'electron-main',
    },
  },
};