import WebpackLicense from '@components/WebpackLicense';

Target

Used to configure the target environment of Rspack output and the ECMAScript version of Rspack runtime code.

Type: string | string[]
Default: browserslist if the current project has a browserslist config, otherwise web.

string

The following options are now supported:

options	description
`'web'`	Compile as available in the browser environment (default)
`'webworker'`	Compile as Web Worker
`'browserslist'`	Infer the ES-features version based on the configured browserslist (default if browserslist config is available)
`'node[[X].Y]'`	Compile as available for Node.js environments
`'async-node[[X].Y]'`	Compile for usage in a Node.js-like environment (uses fs and vm to load chunks asynchronously)
`'esX'`	Compile Rspack runtime to the corresponding ECMAScript version. Currently supports `es3`, `es5`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020`, `es2021`, `es2022`, `es2023`, `es2024`, `es2025` (es5 is used by default)
`'electron[[X].Y]-main'`	Compile for Electron for main process.
`'electron[[X].Y]-renderer'`	Compile for Electron for renderer process, providing a target using `array-push` as chunkFormat and `jsonp` as chunkLoading for browser environments and `NodeTargetPlugin` and `ExternalsPlugin` for CommonJS and Electron built-in modules.
`'electron[[X].Y]-preload'`	Compile for Electron for preload script of renderer process
`'nwjs[[X].Y]'`	Compile as available for NW.js environments
`'node-webkit[[X].Y]'`	Compile as available for node-webkit environments

:::warning Scope of esX

The esX in the target configuration can only specify the ECMAScript version of the Rspack runtime code. If you want to specify the ECMAScript version of the user code, you can use builtin:swc-loader or babel-loader to degrade the user code.

:::

Example

Specify that the Compiler needs to compile to the Node.js environment:

export default {
  target: 'node',
};

When multiple targets are passed, then common subset of features will be used:

export default {
  // Rspack will generate a runtime code for web platform and will use only ES5 features
  target: ['web', 'es5'],
};

Note that not all targets may be mixed for now. When specifying that the Compiler needs to be compiled for multiple platforms, an error is reported:

export default {
  target: ['web', 'node'],
};

For this case, you can define multiple Rspack configurations for bundling based on MultiCompiler.

browserslist

If the current project has a browserslist config, then Rspack will use it for:

Determinate ES-features that may be used to generate the Rspack runtime code (this will not affect the transpilation result of user code).
Infer a target environment (e.g: last 2 node versions the same as target: "node" with some output.environment settings).

:::tip What is Browserslist Browserslist can specify which browsers your web application can run in, it provides a configuration for specifying browsers range. Browserslist has become a standard in the industry, it is used by libraries such as Autoprefixer, Babel, ESLint, PostCSS, SWC and webpack. :::

Supported browserslist values:

browserslist - use automatically resolved browserslist config and environment (from the nearest .browserslistrc file, package.json's browserslist field, or BROWSERSLIST environment variable, see browserslist documentation for details)
browserslist:modern - use modern environment from automatically resolved browserslist config
browserslist:last 2 versions - use an explicit browserslist query (config will be ignored)
browserslist:/path/to/config - explicitly specify browserslist config
browserslist:/path/to/config:modern - explicitly specify browserslist config and an environment

Limitations

Rspack uses browserslist-rs, a Rust implementation of Browserslist, and does not yet fully support all Browserslist features.

Currently unsupported features:

Baseline queries, such as baseline widely available
Custom usage queries, such as > 0.5% in my stats
Coverage-based usage queries, such as cover 99.5% in my stats

Node.js version

A version of node or electron may be optionally specified. This is denoted by the [[X].Y] in the table above.

export default {
  target: 'node18.12',
};

When Rspack generates runtime code, this helps determine which ES features can be used (all chunks and modules are wrapped by runtime code).

Target inheritance

When you use Rspack built-in loaders or minimizer plugins, Rspack automatically derives and applies default target settings for them from the target option.

For example, if you configure target: 'node22', Rspack's builtin:swc-loader will automatically use target settings compatible with Node.js 22.

In practice, this means you usually only need to configure the target option once, and JavaScript transforms, CSS transforms, and code minimization will all use a consistent target. If needed, you can still override the default target in a specific loader or minimizer plugin configuration.

The following loaders and plugins inherit this default:

builtin:swc-loader: automatically sets the env.targets or jsc.target option
builtin:lightningcss-loader: automatically sets the targets option. This only applies to browserslist-related target values, because Lightning CSS only supports browser targets
SwcJsMinimizerRspackPlugin: automatically sets the ecma version
LightningCssMinimizerRspackPlugin: automatically sets the targets option. This only applies to browserslist-related target values

:::tip If you are developing a third-party loader or plugin, you can also use compiler.target to access Rspack's resolved target information and adjust behavior based on the target. :::

Disable target

If none of the predefined targets in the above list meet your needs, you can set target to false, which disables target inference and target-derived defaults.

export default {
  target: false,
};