close
Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute

Target

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

  • Type: string | string[]

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

rspack.config.js
module.exports = {
  target: 'node',
};

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

rspack.config.js
module.exports = {
  // 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:

rspack.config.js
module.exports = {
  target: ['web', 'node'],
};

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

browserslist

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

  • Determinate ES-features that may be used to generate a runtime-code.
  • Infer an environment (e.g: last 2 node versions the same as target: "node" with some output.environment settings).
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 package.json 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

Node.js version

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

rspack.config.js
module.exports = {
  // ...
  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: false

If none of the predefined targets in the above list meet your needs, you can set target to false, which will instruct Rspack not to use any plugins.

rspack.config.js
module.exports = {
  // ...
  target: false,
};