webpack和vite的区别？为什么选vite？

webpack 是什么？引用webpack官网 的原话：

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，
然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

图中，webpack 将左侧繁杂的不同类型文件的模板依赖关系，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等类型文件，打包成了 .js、.css、.jpg、.png 4种类型的静态资源。这就是 webpack 的作用，负责将项目中依赖的各个模块，打包成一个或多个文件。

---

1.webpack和vite区别：

Webpack基于commonjs，先打包合并然后请求服务器，更改一个模块，其他有依赖关系的模块都会重新打包；
Vite基于es6module，自动向依赖的module发请求，服务端按需编译返回，改动一个模块仅仅会重新请求该模块；

2.为什么选vite作为构建工具？

3.脚手架用于初始化，构建工具用于编译阶段

脚手架：初始化；
有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。
vue-cli/@vue-cli    create-vue（vue3专用）vite
构建工具：编译阶段
vite webpack
打包工具：
vite webpack rollup