处理静态资源#

Modern.js Module 会对代码中使用的静态资源进行处理。如果需要配置，则可以使用 buildConfig.asset API。

默认行为#

默认情况下，Modern.js Module 会处理以下静态资源：

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

对于静态文件的处理，Modern.js Module 目前默认支持的功能有：

• 输出静态资源至 ./assets。
• 对于不超过 10kb 的文件会内联到代码中。

示例#

让我们看下面的例子：

• 项目源代码：

import img from './bg.png';

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

./dist
└── asset.js

var img_default = 'data:image/png;base64,';

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

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

import img from './assets/bg.13e2aba2.png';

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

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