---
sidebar_position: 7
---

# 处理静态资源文件

模块工程会对代码中使用的静态资源进行处理。如果需要配置，则可以使用 [`buildConfig.asset`](/api/config/build-config#asset) API。

## 默认行为

默认情况下，模块工程对于以下静态资源会进行处理：

- `'.svg'`、`'.png'`、`'.jpg'`、`'.jpeg'`、`'.gif'`、`'.webp'`
- `'.ttf'`、`'.otf'`、`'.woff'`、`'.woff2'`、`'.eot'`
- `'.mp3'`、`'.mp4'`、`'.webm'`、`'.ogg'`、`'.wav'`、`'.flac'`、`'.aac'`、`'.mov'`

对于静态文件的处理，模块工程目前默认支持的功能有：

- 设置静态资源路径为 `./assets`。
- 对于不超过 **10kb** 的文件会内联到代码中。

让我们看下面的例子：

<CH.Spotlight>

```ts ./src/asset.ts
import img from './bg.png';
console.log(img);
```

---

项目源代码。

---

如果 `bg.png` 的大小小于 10 kb，则此时产物目录结构和产物内容为。

<CH.Code>

```bash
./dist
└── asset.js
```

---

```js ./dist/asset.js
var img_default = 'data:image/png;base64,';
console.info(img_default);
```

</CH.Code>

---

如果 `bg.png` 的大小大于 10 kb，则此时产物目录结构和产物内容为。

<CH.Code>

```bash
./dist
├── asset.js
└── assets
    └── bg.13e2aba2.png
```

---

```js ./dist/asset.js
import img from './assets/bg.13e2aba2.png';
console.info(img);
```

</CH.Code>

</CH.Spotlight>

当想要修改默认行为的时候，可以使用以下 API：

- `asset.path`：修改静态资源文件输出路径。
- `asset.limit`：修改内联静态资源文件的阈值。

