一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
webpack、vite、vue-cli、create-vue 这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。
先看这个表格：
| 脚手架 | vue-cli | create-vue |
| 构建项目 | vite | |
| 打包代码 | webpack | rollup |
脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。 构建项目：建立项目的运行环境，需要手动安装插件。 打包代码：代码写好之后，为了更好的使用，需要打包处理一下。
是不是有了一个整体的感觉？我们再来详细的看一下。
vue-cli
官网：https://cli.vuejs.org/zh/index.html
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。
vue-cli 用于创建 vue2 的项目；@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。
使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue create hello-world 创建项目，具体的就不介绍了。
create-vue
官网：https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools
create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
使用方式
npm init vue@latest
or
yarn create vue
可选插件
然后我们可以选择需要的各种插件：
TypeScript JSX Support Vue Router for Single Page Application development Pinia for state management Vitest for Unit testing Cypress for both Unit and End-to-End testing ESLint for code quality Prettier for code formating
官方最新文档已经看不到 vue-cli 的身影了，只有 create-vue 的使用方式，所以大家可以放心食用。
vite
官网：https://cn.vitejs.dev/
Vite（法语意为 "快速的"，发音
/vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块[1]：提供了 丰富的内建功能[2]，如速度快到惊人的 模块热更新（HMR）[3]
一套构建指令，它使用 Rollup[4] 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。
目前支持的模板预设如下：
| JavaScript | TypeScript |
|---|---|
| vanilla[5] | vanilla-ts[6] |
| vue[7] | vue-ts[8] |
| react[9] | react-ts[10] |
| preact[11] | preact-ts[12] |
| lit[13] | lit-ts[14] |
| svelte[15] | svelte-ts[16] |
rollup
官网：https://rollupjs.org/guide/en/
rollup 是一种打包工具，特点就是，打的包非常精简，体积小。官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。
webpack
尤雨溪在知乎的一次回答（https://www.zhihu.com/question/477139054/answer/2156019180）里提到：
webpack core 是一个纯打包工具（对标 Rollup），而 Vite 其实是一个更上层的工具链方案，对标的是 （webpack + 针对 web 的常用配置 + webpack-dev-server）。
webpack core 因为只针对打包不预设场景，所以设计得极其灵活，不局限于针对 web 打包，几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定场景依然不可替代。但反过来导致的缺点就是配置项极度复杂，插件机制和内部逻辑晦涩难懂，针对常见的 web 也需要大量的配置。
另外大量 loader 插件虽然单独发布却存在各种隐式耦合，很容易配置不当互相影响。对于新手来说，把 webpack 从零开始配到跟 Vite 开箱即用功能对等的程度根本是不可能的任务，所以大部分团队/公司要么用的是基于 webpack 包一层的脚手架（umi, vue-cli），或是专门养一个人称 webpack 配置工程师的角色。
小结
webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。Rollup 是后起之秀，打包更简洁。vite 把 rollup 变成了“开袋即食”，便于新手入门。create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。
所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。
参考资料
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[2]https://cn.vitejs.dev/guide/features.html
[3]https://cn.vitejs.dev/guide/features.html#hot-module-replacement
[4]https://rollupjs.org
[5]vanilla: https://vite.new/vanilla
vanilla-ts: https://vite.new/vanilla-ts
[7]vue: https://vite.new/vue
[8]vue-ts: https://vite.new/vue-ts
[9]react: https://vite.new/react
[10]react-ts: https://vite.new/react-ts
preact: https://vite.new/preact
[12]preact-ts: https://vite.new/preact-ts
[13]lit: https://vite.new/lit
[14]lit-ts: https://vite.new/lit-ts
[15]svelte: https://vite.new/svelte
svelte-ts: https://vite.new/svelte-ts
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
写的不错？赞赏一下
长按扫码赞赏我
推荐阅读：原创推荐：