Creating A Custom Plugin for Vite: The Easiest Guide

This story was originally published on HackerNoon at: https://hackernoon.com/creating-a-custom-plugin-for-vite-the-easiest-guide.
How plugins work in Vite and how to create a custom plugin for Vite
Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #rollup, #create-custom-vite-plugin, #frontend, #how-to-publish-your-plugin, #vite-hooks, #create-plugins-tutorial, #hackernoon-top-story, #vite-tutorial-for-beginners, #hackernoon-es, #hackernoon-hi, #hackernoon-zh, #hackernoon-fr, #hackernoon-bn, #hackernoon-ru, #hackernoon-vi, #hackernoon-pt, #hackernoon-ja, #hackernoon-de, #hackernoon-ko, #hackernoon-tr, and more.

This story was written by: @gmakarov. Learn more about this writer by checking @gmakarov's about page, and for more stories, please visit hackernoon.com.

For the development server, it uses esbuild with native ES modules, which are supported by modern browsers, and we don’t need to bundle code into a single file, and it gives us fast HRM (Hot Module Replacement). For the bundle, it uses a rollup.js because it’s flexible and has a large ecosystem; it allows the creation of highly optimized production bundles with different output formats. Vite’s plugin interface is based on Rollup’s but with additional options and hooks for working with the dev server.