Don't you know how to write a vite plugin yet? It's okay, I'll teach you!

Foreword

Hello everyone, I'm Master Yi. With the popularity of vite tools, can we do something meaningful, such as writing a vite plugin? What do you think?
It just so happens that we can take advantage of the immature stage of the vite plug-in ecosystem, make a plug-in that pleases us, makes leaders happy, and makes the community happy, and work hand in hand with it.
If you are interested in vite, you can go to the column: "Vite from entry to mastery"

From this article you can learn

How to create a vite plugin template
The role of each hook of the vite plugin
Hook execution order of vite plugin
How to write your own plugin

Learn about vite plugins

1. What is vite plugin
vite is actually a new front-end web development tool driven by native ES Module.
The vite plug-in can well extend the things that vite itself cannot do, such as file image compression, support for commonjs, packaging progress bar and so on.
2. Why write a vite plugin
I believe that every classmate here is familiar with the relevant configuration of webpack and common plug-ins by now;
As a new front-end building tool, vite is still young and has a lot of extensibility, so why don't we go hand in hand with it now? Do something more meaningful to you, me, and everyone else?
Quick experience
If you want to write a plug-in, you must start by creating a project. The following general template of vite plug-in can be used directly by clone when you write a plug-in in the future;
Plug-in general template github: experience entry
Plugin github: experience entry

Recommended package manager to use priority: pnpm > yarn > npm > cnpm

Long story short, just start dry~