由于浏览器只能识别html、css、js代码，导致我们在写ts代码以及其他的像less、sass都需要手动的挨个去进行转换（没有使用构建工具之前）
浏览器对于模块的引用还是不能识别
import _ from 'lodash'
这种类似的语法
而构建工具的作用大致上就是为了解决这些问题，
- 把需要转换的工具集成到构建工具中，然后自动化的去转换编辑代码，而不需要手动的单个单个的并转换编辑。
- 对于模块化引用的支持。
- 提高性能：压缩文件、分割代码
- 在你的文件发生改变时，构建工具可以自动化的帮你去进行打包编译，重新加载浏览器，使得我们不需要去关心我们的代码会不会被浏览器识别，以及需不需要重新编译等问题。
而vite和其他的js打包工具的区别（webpack）：
- webpack对多种模块化引用的支持，导致了在每一次文件发生改变的时候，都需要通过入口文件把整个依赖都编译转换一遍。在项目比较大，文件比较多的时候，webpack的速度会明显下降。
- webpack构建过程： index --> module转换 --> 打包 --> 启动服务
- vite和webpack的最大的区别在于，vite只支持esmodule模块引用，这样的好处就是不需要对整个项目进行搜索。
- vite的构建过程： index --> 加载 --> 按需编辑 按需导入模块
wepack启动服务过程：
vite启动服务过程：
