Vite 插件 · Vitest · 与 webpack 对比
官方索引：Plugins API · Vitest
1. Vite 插件是什么？
Vite 插件兼容 Rollup 插件接口，并扩展 vite 独有钩子（如解析 HTML、转换索引、配置开发服务器）。
常用钩子心智：
| 场景 | 钩子方向 |
|---|---|
| 改模块内容 | transform（Rollup 通用） |
| 解析路径 | resolveId |
| 开发服务器：中间件、代理扩展 | configureServer |
| 预览服务器 | configurePreviewServer |
| 整个配置合并 | config / configResolved |
编写时注意：apply: 'serve' | 'build' 可限定插件只在开发或构建生效。
2. Vitest 与 Vite 共用配置
Vitest 测试运行器复用 同一套解析与插件管道，vitest.config 可 mergeConfig 引用 vite.config，减少「测试环境与线上构建不一致」导致的假绿。
补充说明：单测里的别名、resolve.alias、define 与正式构建对齐成本低。
3. webpack vs Vite（简要表述模板）
开发体验
- Vite：原生 ESM + esbuild 预构建依赖，冷启动快；HMR 边界落在模块级。
- webpack：传统打包驱动开发服务器（webpack-dev-server），大项目冷启动与初次编译可能更慢；生态成熟、可定制级极高。
生产构建
- Vite：Rollup 产出，默认压缩 esbuild；插件即 Rollup 生态。
- webpack：自带完整流程；Loader + Plugin 模型深入人心；Module Federation、遗留浏览器支持方案成熟。
选型直觉
- 新项目、以现代化浏览器为主、追求开发反馈速度 → Vite 常见。
- 强依赖 webpack 独有插件链、复杂联邦方案或存量配置迁移成本高 → 继续 webpack 或渐进迁移。
4. 延伸要点
Q：为什么说 Vite 生产构建「不一定比 webpack 更快」？
大型项目最终都要经 Rollup/webpack 完整打包与压缩；Vite 的优势主要体现在开发阶段。
Q：import.meta.glob 干什么？
Vite 提供的基于 ESM 的按需批量导入（如多路由模块），编译期展开为静态映射。
Q：环境变量为何必须 VITE_ 前缀？
防止无意把机密注入客户端包；仅 VITE_ 暴露给前端代码（详见工程实践篇 .env 约定）。
5. 延伸阅读（站内）
- [依赖预构建与 Rollup](./04、依赖预构建·生产构建与 Rollup.md)
- [webpack 常见问题精要](../webpack/05、webpack 常见问题精要.md)