@best-shot/preset-asset

A best-shot preset for asset.

Usage no npm install needed!

<script type="module">
  import bestShotPresetAsset from 'https://cdn.skypack.dev/@best-shot/preset-asset';
</script>

README

@best-shot/preset-asset logo

A best-shot preset for asset.

npm github node

This preset offer the following features:

  • export yml / yaml / txt / json to data or standalone file
  • bundle jpg / jpeg / png / gif / svg
  • bundle woff / woff2 / otf / eot / ttf
  • image minify in production mode

Installation

npm install @best-shot/preset-asset --save-dev

Usage

// example: .best-shot/config.mjs
export default {
  presets: ['asset']
};

Tips

Standalone data file output

For yml / yaml / txt / json format:

import('./sample.json');
// { foo: 'bar' }

import('./sample.[hash].json');
// sample.xxxxxxxx.json

The mutable resourceQuery for image

Generate mutable resources filename:

import('./avatar/male.png?mutable');
// image/avatar/male.png

import('./header/header-bg.png');
// image/header-bg.min.xxxxxxxx.png

Preprocess non-ascii character

天地人-abc.jpg -> 4273f2f7-abc.jpg

Related