PART 13

Real-world plugins

Source-code reading: auto-import / plugin-pages / plugin-react v6.

13.1Source Walkthrough: `unplugin-auto-import`The auto-import plugin used in virtually every Vue project — how does it actually work? How does resolveId intercept, how does transform inject imports, and why does it use unplugin instead of vite-plugin?
13.2Source Walkthrough: `vite-plugin-pages`Learn file-system routing as a complete Vite plugin: directory scanning, route parsing, virtual modules, type declarations, HMR invalidation, and production-grade edge cases.
13.3Source Walkthrough: `@vitejs/plugin-react` v6Use the official React plugin for Vite 8 to understand Oxc JSX configuration, Fast Refresh runtime, preamble handling, SSR entrypoints, and Babel migration boundaries.
13.4Project 10: Build a Simplified Auto-Import PluginApply everything you've learned about the plugin system — implement a real, working auto-import plugin that covers all the major hooks: transform / resolveId / load / generateBundle / configureServer.