尤大在知乎上说过，很多人会抛弃 webpack 开始使用 vite ，一起来体验下吧。
一、vite 介绍
Vite 是一种开发构建工具，开发过程中它利用浏览器的 native ES Module 特性按需导入源码，预打包依赖。Vite 需要 Node.js版本 >= 12.0.0
vite 两大特点：
- 启动快 ：vite 启动项目的速度是非常快的，这个速度和项目的大小是没有关系的，因为它不会像 webpack 一样会对整个项目进行打包编译等操作之后在进行启动
- 更新快
二、创建 vite 项目
npm init @vitejs/app
可以看到 vite 已经内置支持了一些相关的框架：vue 、react 、svelte，在这笔者就选择 vue-ts 的选项
大概的项目结构
三、vite 带来的变化
使用 vite 创建项目之后，其内容是有所变化的，首先 index.html 文件中引入 main.ts 的方式变成了 <script type="module" src="/src/main.ts"></script>，这意味着浏览器在引入这个 main.ts 文件时就会使用 ES 的方式，并且会对 main.ts 中所依赖的文件进行按需加载，就不需要像 webpack 一样需要进行打包了：
3.1 将资源引入为 URL
服务时引入一个静态资源会返回解析后的公共路径，例如：
<img alt="Vue logo" src="./assets/logo.png" /> 解析为 /src/assets/logo.png
甚至我们可以通过使用变量的方式
下面是通过浏览器显示给我们的结果
3.2 样式相关的使用
- 除了最常用的 全局样式 和 局部样式 之外，我们也可以使用 css module 的方式：
这样模块化的 css 的优点是，它会对我们的 class 名称做一个 hash 处理，这也使得我们的 class 名称在全局是唯一的，不会破坏 css 中 class 名称的深度，它不像 scope css 那样会被解析成对应的属性选择器，改变了 class 的深度。
也可以将模块化的 css 样式抽离出去，在引入时需要我们通过 import xx from 'xx.css' 的方式为当前的 css module 具名化，就不需要像上图一样使用 $style.xx 的形式进行访问
- 使用 sass 、less 等当项目变大时，我们需要使用更多的样式时，我们需要先安装对应的 预处理器，以 sass 为例：
在当前项目下安装 npm i sass -D, 然后就可以在项目中进行使用了，因为 vite 主张开箱即用，它的功能都是基于插件来实现的，安装了对应的开发依赖以后，我们不需要像 webpack 那样在安装对应的 loader 然后又得去做 loader 的相关配置。
3.3 设置路径别名
3.4 配置代理
3.5 mock 数据
安装依赖： npm i mockjs -S & npm i vite-plugin-mock -D ， 并添加配置
在项目根路径下 新增 mock 文件夹，注意这里默认支持了 .ts 文件类型
四、vite 插件
vite 插件可以扩展 vite 的能力，比如解析用户自定义的文件输入，在打包代码前转译代码，或者查找第三方模块。
vite 插件的形式
即便 vite 已经拥有了自己的 系统插件【橘色部分】，也有了一些 用户插件【绿色部分】，但是针对不同的场景，vite 不能全部都替实现，或者需要我们去改写一些其他已存在的插件，因此需要我们实现对应的插件。
插件钩子
开发时，Vite创建一个插件容器按照顺序调用各个钩子。
plugins: [vue({config:xxx,configResolved:xxx,...}), viteMockServe({})],
- config：修改Vite配置
- configResolved：Vite配置确认
- configureServer：用于配置dev server
- transformIndexHtml：用于转换宿主页
- resolveId：创建自定义确认函数，常用语定位第三方依赖
- load：创建自定义加载函数，可用于返回自定义的内容
- transform：可用于转换已加载的模块内容
- handleHotUpdate：自定义HMR更新时调用自定义 vite 插件，例如：
