使用webpack 和 vite 时常见的四个阶段，分别为
1.启动
2.编译
3.更新
4.构建
项目中运行时就会启动
启动前就需要对项目进行编译（如：es6转es5）
编译完的模块会被推送到浏览器中
代码变动就会实时进行更新
项目上线就需要构建打包
vite用到了模块级更新，无打包过程，动态加载等优化技术实现高效的快速的反应代码的速度。
比webpack 要快。
差异
1.编译阶段
在启动时，webpack会进行编译打包构建
而vite，会按需编译，就是会对当下你所需要的部分模块进行编译
所以启动阶段也是vite比较快的
2.热更新
vite 基于现代浏览器支持es模块的特性，然后再热更新的时候实现模块级的热更新。
vite再发生变化的时候，通过修改变化的代码去找到对应的模块更新，比较精准并且更局部。
webpack 的热更新是基于文件级别的，就是只能检测以文件为最小单位的的变化，然后对整个页面进行构建编译的可能或者重新编译受影响的模块，然后发送到浏览器进行替换。
3.打包构建
vite在开发环境下不会进行打包构建，而是直接利用浏览器原生模块的导入功能，通过http服务器提供模块的及时响应。
webpack 需要一开始启动的时候就已经打包构建过了。
打包过程复杂，每次代码更改后都需要重新打包一遍所有依赖，过程比较缓慢。
- 插件
webpack 插件全
vite 比较少
5.适应环境
webpack 更全面也复杂所以更适合大中型
vite 适合中小型
6.生产环境下
webpack 使用babel打包
vite使用rollup+esbuild打包代码
esbulid比babel快很多
vite缺点
热更新的时候有时候会失败，重新刷新就可解决
有些功能rollup 不支持
不支持ie
webpack 支持ie9以上
webpack 缺点
配置比较繁琐复杂
构建速度很慢
输出文件体积较大
对服务器渲染不友好
