You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/en/config/rsbuild/output.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ Whether to emit CSS to the output bundles.
44
44
45
45
At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
46
46
47
-
It is important to note that `output.externals` differs from [source.alias](/config/rsbuild/source#sourcealias). Check out [source.alias](/config/rsbuild/source#sourcealias) documentation for more information.
47
+
It is important to note that `output.externals` differs from [resolve.alias](/config/rsbuild/resolve#resolvealias). Check out [resolve.alias](/config/rsbuild/resolve#resolvealias) documentation for more information.
Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack.
12
+
13
+
It is important to note that `resolve.alias` differs from [output.externals](/config/rsbuild/output#outputexternals) in the following ways:
14
+
15
+
-`resolve.alias` allows you to replace the target module you want to include in the output bundles with another module. It only works if [lib.bundle](/config/lib/bundle) is set to `true`.
16
+
17
+
For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows:
18
+
19
+
```ts title="rslib.config.ts"
20
+
exportdefault {
21
+
// ...
22
+
resolve: {
23
+
alias: {
24
+
lodash: 'lodash-es',
25
+
},
26
+
},
27
+
};
28
+
```
29
+
30
+
All `lodash` modules imported in the source code will be mapped to `lodash-es` and be bundled into the output.
31
+
32
+
-`output.externals` is used to handle alias mapping for externalized modules. Externalized modules are not included in the bundle; instead, they are imported from external sources at runtime.
33
+
34
+
For example, if you want to replace `react` and `react-dom` with `preact/compat` in the bundle, you can configure it as follows:
35
+
36
+
```ts title="rslib.config.ts"
37
+
exportdefault {
38
+
// ...
39
+
output: {
40
+
externals: {
41
+
react: 'preact/compat',
42
+
'react-dom': 'preact/compat',
43
+
},
44
+
},
45
+
};
46
+
```
47
+
48
+
Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`.
Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack.
15
-
16
-
It is important to note that `source.alias` differs from [output.externals](/config/rsbuild/output#outputexternals) in the following ways:
17
-
18
-
- The `source.alias` is used when bundling target code into the product (when [lib.bundle](/config/lib/bundle) is set to `true`). It allows you to replace the target module you want to include in the output with another module.
19
-
20
-
For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows:
21
-
22
-
```ts title="rslib.config.ts"
23
-
exportdefault {
24
-
// ...
25
-
source: {
26
-
alias: {
27
-
lodash: 'lodash-es',
28
-
},
29
-
},
30
-
};
31
-
```
32
-
33
-
All `lodash` modules imported in the source code will be mapped to `lodash-es` and be bundled into the output.
34
-
35
-
-`output.externals` is used to handle alias mapping for externalized modules. Externalized modules are not included in the bundle; instead, they are imported from external sources at runtime.
36
-
37
-
For example, if you want to replace `react` and `react-dom` with `preact/compat` in the bundle, you can configure it as follows:
38
-
39
-
```ts title="rslib.config.ts"
40
-
exportdefault {
41
-
// ...
42
-
source: {
43
-
alias: {
44
-
react: 'preact/compat',
45
-
'react-dom': 'preact/compat',
46
-
},
47
-
},
48
-
};
49
-
```
50
-
51
-
Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`.
0 commit comments