vite插件可以很好的扩展其自身不能做到的事。比如文件图片压缩，commonjs的支持等

什么是vite插件

vite插件实现思路就是webpack的loader+plugin；它扩展自Rollup的插件接口，额外多了vite的特有选项。

总的来说，vite插件是一个拥有name属性，包含各种钩子函数的对象。

export default function (options){ // 可传入配置选项
  return {
    name:'my-vite-plugin',
    resolveld(id){},
    load(id){},
    transform(code){},
  }
}

简单介绍下钩子函数，钩子函数其实就是函数，即在特定生命周期进行调用。以下是常用的钩子函数

// 启动调用一次，更新不会调用

1. options 替换或操纵rollup选项
2. buildStart 开始构建

// vite 特有

1. config(userConfig,env){} 修改Vite配置
2. configResolved(resolvedConfig){} Vite配置确认
3. configServer(viteDevServer){} 用于配置dev server 可以进行中间件操作
4. transformIndexHtml(html){} 转换宿主页面
5. handleHotUpdate(hmrContext){} 自定义HMR更新时调用

// 核心钩子，每次模块请求都会被调用

1. resolvedId 创建自定义确认函数，常用于定位第三方依赖，找到对应文件
2. load 创建自定义加载函数，可用于返回自定义内容-加载文件源码
3. transform 用于转换已加载的模块内容 转换源码到需要的代码

具体的钩子执行顺序如下

config -> configResolved -> options -> configServer -> buildStart -> transformIndexHtml -> resolvedId -> load -> transoform

export default function () {
    return {
        // 显示在 warning 和 error 中，用于警告和错误展示
        name: 'hooks-order',
        // 初始化hooks，只走一次。服务器启动时被调用
        options(opts) {
            console.log('options');
        },
        // 启动时调用一次
        // vite （本地）服务启动时调用，在这个函数中可以访问 rollup 的配置
        buildStart() {
            console.log('buildStart');
        },
        // vite特有钩子，在解析 Vite 配置前调用。
        // 接收原始用户配置（命令行选项指定的会与配置文件合并）
        // 和一个描述配置环境的变量
        config(userConfig, env) {
            console.log('userConfig');
            return {}
        },
        // Vite配置确认，在解析 Vite 配置后调用
        configResolved(resolvedCofnig) {
            console.log('configResolved');
        },
        // 用于配置dev server，可以进行中间件操作
        configureServer(server) {
            console.log('configureServer');
        // server.app.use((req, res, next) => {
        // // custom handle request...
        // })
        },
        // 用于转换宿主页，接收当前的 HTML 字符串和转换上下文
        transformIndexHtml(html) {
            console.log('transformIndexHtml');
            return html
            // return html.replace(
            // /<title>(.*?)</title>/,
            // `<tite>Title replaced!</title>`
            // )
        },
        // 通用钩子，创建自定义确认函数
        resolveId(source) {
         // console.log(resolveId)
            if (source === 'virtual-module') {
                console.log('resolvedId');
                return source;
            }
            return null;
        },
        // 创建自定义加载函数，可用于返回自定义的内容，处理文件，可以返回import语句来加载模块
        load(id) {
            console.log('load');
            if (id === 'virtual-module') {
                return 'export default "This is virtual!"'
                    ;
            }
            return null;
        },
        // 可用于转换已加载的模块内容（转变源码为需要的代码），处理模块
        transform(code, id) {
            console.log('transform');
            if (id === 'virtual-module') {
            }
            return code
        }
    }
}