WebPack与Vite比较与使用

什么是WebPack？

征战图@

看图就知道了，如图左边的是我们平常编码的一些文件，他们种类繁多复杂，
有css,less,cjs,js,sass,还有各种各样的图片资源。webpack需要做的
就是将我们编码的原始文件资源，通过特定的手段将其打包成标准的前端3件套 ————js,html,css。

WebPack的具体作用与解决了什么问题？

需要回答这个问题，我们先需要知道，下面这个问题的答案

前端为什么要工程化，模块化？

随着前端页面的越来越多，各种，js，css，其他静态文件，各种其他文件格式，
不断的耦合，使得前端的项目维护，2次开发，错误修复变得非常的艰难，所以这
就产生了前端模块化思想的编程方式。
如图是模块化开发的Vue项目
在没有打包前的前端的工程大概长这个样子。

这导致了什么问题？

模块化编程会给前端带来那些缺点那？
1 文件越写越多，可能上千个文件，变的更加繁多了

2 你写的静态资源，浏览器每访问一次，可能就会去请求一次，静态资源模块，比如js文件
css文件等会降低响应速度。

3 部署也更加的艰难，文件解压速度，压缩速度也会消耗时间。
4 部分文件浏览器不能识别，比如vue,less,sass等
所以webpack就解决了纯模块化编程的问题，它会将上千个不同的模块化文件，非模块化
文件通过特定的算法，分割打包成标注的3件套。同时你可以在开发时使用模块化的方式，
但是在部署时无需担心模块化的难部署，加载问题。可谓是，美哉呀！！
打包后的这个样子

那webpack怎么好，没有缺点吗？

1 打包速度很慢的，看图。
可以看到，webpack的方式，每次打包需要加载所有关联的模块文件，所以慢在这里。

2 而对于开发时文件修改后的热更新 HMR 也存在同样的问题；

Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次，所以速度慢。

那有没有有能解决这些问题的？

有！那就是Vite

什么是Vite?

下一代的前端工具链，为前端开发提供极速响应。

它解决了什么WebPack的什么问题？

1 打包问题，vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求，加载不同的模块处理，实现真正的按需加载；
2 热更新问题，vite 采用立即编译当前修改的文件，同时 vite 还会使用缓存机制( http缓存 => vite内置缓存 )，加载更新后的文件内容
如图为vite官网
https://vitejs.cn/

使用Vite

1 创建Vite项目

yarn create vite
2 填入新的名称
3 选择Vue
4 选择js
结果：

2 查看Vite项目

我们发现具体的结果就变了，index.html从public中移了出来而已

3 启动项目

npm run dev

可以发现速度非常的快速

4 打包项目

yarn run build

速度也超快速