Vite Has a Free Plugin API That Most Frontend Developers Ignore

Vite is the default build tool for React, Vue, Svelte, and Solid. But its plugin API — built on Rollup — gives you superpowers most developers never touch. Writing a Vite Plugin // vite.config.ts import { defineConfig , Plugin } from " vite " ; function myPlugin (): Plugin { return { name : " my-plugin " , // Transform any file transform ( code , id ) { if ( id . endsWith ( " .md " )) { return `export default ${ JSON . stringify ( markdownToHtml ( code ))} ` ; } }, // Add virtual modules resolveId ( id ) { if ( id === " virtual:build-info " ) return " \ 0virtual:build-info " ; }, load ( id ) { if ( id === " \ 0virtual:build-info " ) { return `export const buildTime = " ${ new Date (). toISOString ()} ";` ; } }, // Hook into dev server configureServer ( server ) { server . middlewares . use ( " /api/health " , ( req , res ) => { res . end ( JSON . stringify ({ status : " ok " })); }); } }; } export default defineConfig ({ plugins : [ myPlugin ()] }); HMR API: Hot Module Replacement // I