Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions website/docs/en/guide/advanced/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,37 @@ When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the

Once static assets are imported, they will automatically be output to the build output directory. You can:

- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename).
- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath).
- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename). For example, add a hash value to the filename of the outputs, which is usually used when there are files with the same name to avoid filename conflicts.

```ts title="rslib.config.ts"
export default {
output: {
filename: {
svg: '[name].[contenthash:8].svg',
font: '[name].[contenthash:8][ext]',
image: '[name].[contenthash:8][ext]',
media: '[name].[contenthash:8][ext]',
assets: '[name].[contenthash:8][ext]',
},
},
};
```

- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath). For example, emit static assets output to the `dist/resource` directory.

```ts title="rslib.config.ts"
export default {
output: {
distPath: {
svg: 'resource/svg',
font: 'resource/font',
image: 'resource/image',
media: 'resource/media',
assets: 'resource/assets',
},
},
};
```

## Type declaration

Expand Down
33 changes: 31 additions & 2 deletions website/docs/zh/guide/advanced/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,37 @@ export default {

当静态资源被引用后,会自动被输出到构建产物的目录下,你可以:

- 通过 [output.filename](/config/rsbuild/output#outputfilename) 来修改产物的文件名。
- 通过 [output.distPath](/config/rsbuild/output#outputdistpath) 来修改产物的输出路径。
- 通过 [output.filename](/config/rsbuild/output#outputfilename) 来修改产物的文件名。例如,在产物的文件名中添加 hash 值,这通常在有同名文件时使用,以避免文件名冲突。

```ts title="rslib.config.ts"
export default {
output: {
filename: {
svg: '[name].[contenthash:8].svg',
font: '[name].[contenthash:8][ext]',
image: '[name].[contenthash:8][ext]',
media: '[name].[contenthash:8][ext]',
assets: '[name].[contenthash:8][ext]',
},
},
};
```

- 通过 [output.distPath](/config/rsbuild/output#outputdistpath) 来修改产物的输出路径。例如,将静态资源产物输出到 `dist/resource` 目录下。

```ts title="rslib.config.ts"
export default {
output: {
distPath: {
svg: 'resource/svg',
font: 'resource/font',
image: 'resource/image',
media: 'resource/media',
assets: 'resource/assets',
},
},
};
```

## 类型声明

Expand Down
Loading