esbuild-plugin-inject-preload

esbuild-plugin-inject-preload

Injects preload links to html template.

Usage

import { BuildOptions } from 'esbuild';
import { pluginInjectPreload } from 'esbuild-plugin-inject-preload';

const esbuildConfig: BuildOptions = {
  assetNames: '[ext]/[name]' | '[name]', // optional, this plugin supports nested folders
  outdir: path.resolve('build'), // required
  metafile: true, // required
  plugins: [
    pluginInjectPreload({ 
      ext: '.woff',
      linkType: 'font',
      templatePath: path.resolve('build/template.html'),
      replaceString: '<!-- FONT_PRELOAD -->',
    }),
  ],
};

You should place some string into you html like <!-- FONT_PRELOAD --> in the example. So, the output html file will contain links to all files with a certain extension, like:

<link as="font" crossorigin="anonymous" href="/woff/Roboto-Regular.woff" rel="preload">
<link as="font" crossorigin="anonymous" href="/woff/Roboto-Medium.woff" rel="preload">