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:

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

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

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.