Vite 自定义插件
2026/3/26大约 1 分钟
icon: akar-icons:file
date: 2026-02-04
order: 2
category:
- Vite
Vite 自定义插件
本质
vite 插件的本质就上 rollup插件 + vite 独有的钩子
┌─────────────────────────────────────────────────────┐
│ Vite 插件 │
├─────────────────────────────────────────────────────┤
│ Rollup 插件钩子 (通用) │
│ ├── buildStart │
│ ├── resolveId │
│ ├── load │
│ ├── transform │
│ ├── renderChunk │
│ ├── generateBundle │
│ └── writeBundle │
├─────────────────────────────────────────────────────┤
│ Vite 独有钩子 │
│ ├── config │
│ ├── configResolved │
│ ├── configureServer │
│ ├── transformIndexHtml │
│ └── handleHotUpdate │
└─────────────────────────────────────────────────────┘完整生命周期
┌─────────────────────────────────────────────────────────────────────────────┐
│ Vite 启动 / 开发模式 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ config │ ← 读取 vite.config.js 时调用 │
│ └──────┬──────┘ 可以修改配置、添加插件、返回新配置 │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ configResolved │ ← 配置完全解析后调用 │
│ └──────┬──────────────┘ 可访问最终配置，进行最后修改 │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ buildStart │ ← 构建开始前调用 │
│ └──────┬──────────────┘ 用于初始化插件状态 │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ configureServer │ ← 启动开发服务器时调用 (仅 dev) │
│ └──────┬──────────────┘ 用于添加中间件、配置代理等 │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ handleHotUpdate │ ← HMR 时调用 (仅 dev) │
│ └──────┬──────────────┘ 可控制哪些文件触发 HMR │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ transformIndexHtml │ ← 转换 index.html 时调用 │
│ └──────┬──────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ 开发服务器运行中 │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ resolveId│ ──► │ load │ ──► │ transform │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ │ │ │ │ │
│ │ │ 每个模块请求都会依次执行这三个钩子 │ │
│ │ │ │ │ │ │
│ └────────┼────────────────┼────────────────┼──────────────────────┘ │
│ │ │ │ │
│ │ 循环调用 ◄───┘ │ │
│ ▼ │ │
│ ┌─────────────────────┐ │ │
│ │ transform (模块) │ ◄──────────────────┘ │
│ └─────────────────────┘ 继续等待下一个模块 │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ 生产构建模式 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ 构建阶段 │ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ buildStart │ ──► 初始化 │ │
│ │ └──────┬───────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────────────────────────────────────────┐ │ │
│ │ │ 模块解析循环 │ │ │
│ │ │ │ │ │
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │
│ │ │ │ resolveId│ ──► │ load │ ──► │ transform │ │ │ │
│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │
│ │ │ │ │ │
│ │ └──────────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ renderChunk │ ← 渲染 chunk 时调用 │ │
│ │ └──────────────────┘ 可用于修改 chunk 内容 │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ generateBundle │ ← 所有 chunk 生成完毕 │ │
│ │ └──────────────────┘ 可用于添加额外资源 │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ writeBundle │ ← 写入文件前调用 │ │
│ │ └──────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ buildEnd │ ← 构建完成 │ │
│ │ └──────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ closeBundle │ ← 关闭 bundle │ │
│ │ └──────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘