0-3-vue框架-构建工具-Vite 与 Vue Cli 对比（vue3还是使用vite）,webpack

webpack介绍

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

安装webpack

首先要安装Node.js，Node.js自带了软件包管理工具npm，可以使用npm安装各种插件。Webpack至少需要Node.js v0.6版本，直接安装最新版就好了。
使用 cnpm 安装 webpack：

cnpm install webpack -g

Vue CLI

Vue 开发者应该无人不知 Vue CLI，他是 Vue 2 最棒的前端构建工具，Vue CLI 基于 Webpack 之上，是 Webpack 的超集。

Vue CLI 安装

npm install -g @vue/cli

安装完成之后，可以使用vue --version，查看这个vue/cli的版本，

Vue CLI 创建vue项目

先进入你的项目路径，然后执行，vue create project_name
直接选择default模式，回车，

Vue cli 在服务启动之前，要把所有代码打包成 Bundle 再启动服务。这就是为什么启动一些大型项目时，特别慢的原因。这一点上 Vite 做了大幅改善。

Vite

Vite 是 Vue 团队开发的新一代前端开发与构建工具，Vite 不是基于 Webpack 开发的，他为了解决服务启动慢的问题，Vite 通过一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

Vite 和 Vue Cli 区别

Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。
vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。
所以两者在生产环境下都是基于源代码文件打包。

但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。
所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验及其愉快。

Vite 会取代 vue-cli 吗？尤雨溪在 Twitter 上说