Skip to content

Commit

Permalink
docs: add guide for other targets
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Aug 28, 2024
1 parent 5f196e1 commit 555f29d
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 1 deletion.
20 changes: 20 additions & 0 deletions website/docs/en/config/output/target.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ Refers to the build target running in the Node.js environment, usually used in s

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

- Set Rspack's [target](https://rspack.dev/config/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.
- CSS code will not be bundled or extracted, but the id information of CSS Modules will be included in the bundle.
- The default code split strategy will be disabled, but dynamic import can still work.
Expand All @@ -81,7 +82,26 @@ A web worker is a type of JavaScript program that runs in the background, indepe

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

- Set Rspack's [target](https://rspack.dev/config/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 code split strategy will be disabled, and **dynamic import can not work**, because the Web Worker only runs a single JavaScript file.
- Disable the HMR.

## Other targets

[Rspack](https://rspack.dev/config/target) 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](/config/tools/rspack).

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

```js
export default {
tools: {
rspack: {
target: 'electron-main',
},
},
};
```
22 changes: 21 additions & 1 deletion website/docs/zh/config/output/target.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default {

`target` 设置为 `'node'` 时,Rsbuild 会进行以下处理:

- 将 Rspack 的 [target](https://rspack.dev/config/target) 设置为 `'node'`
- 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Node.js 环境不需要 HTML。
- 不会打包或抽取 CSS 代码,但产物中会包含 CSS Modules 的 id 信息。
- 不会开启默认的拆包策略,但 dynamic import 依然可以生效。
Expand All @@ -76,12 +77,31 @@ export default {
指运行在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 环境的产物。

:::tip Web Worker
Web Workers 是一种 JavaScript API,它允许网页在后台线程中执行脚本,与主线程(网页)分离。这意味着,您可以使用 Web Workers 来执行计算密集型或长时间运行的任务,而无需阻塞主线程,进而影响网页的性能。
Web Worker 是一种 JavaScript API,它允许网页在后台线程中执行脚本,与主线程(网页)分离。这意味着,您可以使用 Web Worker 来执行计算密集型或长时间运行的任务,而无需阻塞主线程,进而影响网页的性能。
:::

`target` 设置为 `'web-worker'` 时,Rsbuild 会进行以下处理:

- 将 Rspack 的 [target](https://rspack.dev/config/target) 设置为 `'webworker'`
- 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Web Worker 环境不需要 HTML。
- 不会打包或抽取 CSS 代码,但产物中会包含 CSS Modules 的 id 信息。
- 不会开启默认的拆包策略,**并且 dynamic import 也不会生效**,因为 Web Worker 仅运行支持单个 JavaScript 文件。
- 不会开启热更新相关的能力。

## 其他 target

Rspack 支持的 [target](https://rspack.dev/config/target) 类型更为丰富,比如 `electron-main``electron-renderer` 等。

目前 Rsbuild 暂未支持这些 target,你可以通过 [tools.rspack](/config/tools/rspack) 来配置这些 target。

例如设置 `target``'electron-main'`,这会覆盖 Rsbuild 默认设置的 `'web'`

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

0 comments on commit 555f29d

Please sign in to comment.