处理静态资源

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 的文件会内联到代码中。

示例

让我们看下面的例子:

  • 项目源代码:
./src/asset.ts
import img from './bg.png';
  • 如果 bg.png 的大小小于 10 kb,则此时产物目录结构和产物内容为:
./dist
└── asset.js
./dist/asset.js
var img_default = 'data:image/png;base64,';
  • 如果 bg.png 的大小大于 10 kb,则此时产物目录结构和产物内容为:
./dist
├── asset.js
└── assets
    └── bg.13e2aba2.png
./dist/asset.js
import img from './assets/bg.13e2aba2.png';

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

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