Handle static assets

Modern.js Module will handle static assets used in the code. If configuration is required, then the buildConfig.asset API can be used.

Default behavior

By default, Modern.js Module handles the following static assets:

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

For the handling of static files, Modern.js Module currently supports the following functions.

  • Set the static asset path to . /assets.
  • Files less than 10kb will be inlined into the code.

Example

Let us look at the following example:

  • Project source code:
./src/asset.ts
import img from './bg.png';
//...
  • If the size of bg.png is less than 10 kb, then the output directory structure and file content are.
./dist
└── asset.js
./dist/asset.js
var bg_default = 'data:image/png;base64,';
console.info(bg_default);
  • If the size of bg.png is larger than 10 kb, then the output directory structure and file content are.
./dist
├── asset.js
└── assets
    └── bg.13e2aba2.png
./dist/asset.js
import img from './assets/bg.13e2aba2.png';
console.info(img);

When wanting to modify the default behavior, the following API can be used:

  • asset.path: modify the output path of the static assets.
  • asset.limit: modify the threshold value for inline assets.