插件概念与生命周期

Vite 插件基于 Rollup 插件接口扩展，支持开发和构建阶段的不同钩子。

插件基础结构

function myPlugin() {
  return {
    name: 'my-plugin',  // 插件名称（必需）
    // 钩子函数...
  }
}

双阶段钩子

Vite 特有钩子

{
  // 配置解析前调用
  config(config, { command, mode }) {
    return { // 返回部分配置合并
    }
  },

  // 配置解析后调用
  configResolved(resolvedConfig) {
    // 可访问最终配置
  },

  // 配置服务器
  configureServer(server) {
    // 开发服务器实例
  },

  // 转换索引 HTML
  transformIndexHtml(html) {
    return html  // 或返回标签数组
  }

  // 处理 HMR 更新
  handleHotUpdate({ file, server, modules }) {
    // 自定义热更新行为
  }
}

Rollup 兼容钩子

{
  // 模块路径解析
  resolveId(source, importer) {
    return null  // 返回 null 使用默认解析
  },

  // 加载模块内容
  load(id) {
    return null  // 返回 null 使用默认加载
  },

  // 转换模块代码
  transform(code, id) {
    return code  // 返回转换后的代码
  }
}

注意：Vite 插件可同时使用 Vite 钩子和 Rollup 钩子。

钩子执行顺序

config → configResolved → configureServer →
resolveId → load → transform →
handleHotUpdate（热更新时）

强制钩子顺序

{
  name: 'my-plugin',
  enforce: 'pre',  // pre/post/默认
  // 钩子...
}

要点总结

• Vite 插件兼容 Rollup 插件接口
• 具有开发环境和构建环境双阶段钩子
• config/configResolved 用于配置阶段
• resolveId/load/transform 用于模块处理