Vite与webpack的区别
构建速度：Vite > webpack：Vite使用现代浏览器原生支持的ES模块标准，避免打包和编译的时间。webpack打包时对所有的模块进行解析和编译- Vite开发模式下使用Rollup构建，支持按需编译和利用浏览器的ES模块，构建速度快
- Webpack基于模块化思想和依赖分析，生产模式下可以实现代码压缩、分离等复杂的构建操作
开发模式：Vite支持“即时重载”功能，编辑代码后，浏览器自动更新页面。webpack需要手动刷新浏览器- Vite开发模式使用Rollup打包，提供了一个内置的http服务器提供服务，使用ES modules作为默认的模块系统，可以快速地进行热更新和快速构建
- webpack开发模式需要使用一些插件实现，如HMR
配置：webpack需要复杂的配置管理不同的loader、插件、代码分割、和优化配置,Vite配置少量- Vite使用ES modules进行导入和导出，配置文件也是一个ES modules，可以直接使用ES6语法
- Webpack使用CommonJS方式进行导入和导出，配置文件是一个CommonJS模块
生态系统和插件支持：Vite社区和插件支持有限，webpack成熟，有大量的生态系统和社区支持。
Vite插件的执行顺序
可以使用enforce修饰符强制插件的位置：
pre：在 Vite 核心插件之前调用该插件- 默认：在 Vite 核心插件之后调用该插件
post：在 Vite 构建插件之后调用该插件
Vite是如何启动项目的？？
- 第一步: package.json文件中定义一个命令，启动vite项目
"scripts":{
"dev":"vite"
}
- 第二步：执行命令行脚本：启动项目，通过寻找
node_module/.bin目录下的vite脚本，在执行cli.ts文件中引入的createServer方法启动本地项目
createServer方法
八个核心步骤：
1:配置参数解析，包括vite核心配置\https配置\chokidar配置 2:创建HTTP和WebSocket server，用于启动开发server和热更新通信 3:启动chokidar文件监听器，监听文件变化，实现热更新 4:创建ModuleGraph实例，记录模块依赖关系 5:创建插件容器，管理插件生命周期、执行过程、插件之间传递上下文 6:定义ViteDevServer对象，包含核心配置和启动开发Srever核心方法 7:执行configureServer定义函数，创建自定义中间件 8:定义内部中间件
