一篇文章说清webpack、vite、vue-cli、create-vue的区别

webpack、Vite、vue-cli、create-vue这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。

先看这个表格：

|||||:---:|:---:|:---:||脚手架|vue-cli|create-vue||构建项目||vite||打包代码|webpack|rollup|

脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。

构建项目：建立项目的运行环境，需要手动安装插件。

打包代码：代码写好之后，为了更好的使用，需要打包处理一下。

是不是有了一个整体的感觉？我们再来详细的看一下。

官网：https://cli.vuejs.org/zh/index.html

VueCLI的包名称由vue-cli改成了@vue/cli

vue-cli是Vue早期推出的一款脚手架，使用webpack创建Vue项目，可以选择安装需要的各种插件，比如Vuex、VueRouter等。

vue-cli用于创建vue2的项目；@vue/cli用于创建vue3的项目，当然也支持vue2。

使用起来还是比较繁琐的，首先要安装脚手架，然后使用vuecreatehello-world创建项目，具体的就不介绍了。

官网：https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools

create-vue是Vue3的专用脚手架，使用vite创建Vue3的项目，也可以选择安装需要的各种插件，使用更简单。

然后我们可以选择需要的大正各种插件：

TypeScript

JSXSupport

VueRouterforSinglePageApplicationdevelopment

Piniaforstatemanagement

VitestforUnittesting

CypressforbothUnitandEnd-to-Endtesting

ESLintforcodequality

Prettierforcodeformating

官方最新文档已经看不到vue-cli的身影了，只有create-vue的使用方式，所以大家可以放心食用。

官网：https://cn.vitejs.dev/

Vite（法语意为"快速的"，发音?/vit/，发音同"veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于?原生ES模块?提供了?丰富的内建功能，如速度携拦快到惊人的?模块热更新（HMR）。

一套构建指令，它使用?Rollup?打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

使用vite不仅可以创建vue的项目，而且可以创建react等项目，只是需要手动安装第三方插件，有点麻烦。

目前支持的模板预设如下：

官网：https://rollupjs.org/guide/en/

rollup是一种打包工具，特点就是，打的包非常精简，体积小。官网是英文的，中文资料也比较少，不过好在常规用法可以参考vite的官网。

尤雨溪在知乎的一次回答（https://www.zhihu.com/question/477139054/answer/2156019180）里提到：

webpackcore是一个纯打包工具（对标Rollup），而Vite其实是一个更上层的工具链方案，对标的是（webpack+针对web的常用配置+webpack-dev-server）。

webpackcore因为只针对打包不预设场景，所以设计得极其灵活，不局限于针对web打包，几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定场景依然不可替代。但反过来导致的缺点就是配置项极度复杂，插件机制和内部逻辑晦涩难懂，针对滚隐悔常见的web也需要大量的配置。

另外大量loader插件虽然单独发布却存在各种隐式耦合，很容易配置不当互相影响。对于新手来说，把webpack从零开始配到跟Vite开箱即用功能对等的程度根本是不可能的任务，所以大部分团队/公司要么用的是基于webpack包一层的脚手架（umi,vue-cli），或是专门养一个人称webpack配置工程师的角色。

webpack是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。Rollup是后起之秀，打包更简洁。vite把rollup变成了“开袋即食”，便于新手入门。create-vue基本取代了vue-cli，除非你想创建vue2的项目。

所以，想创建一个vue3的项目，首选create-vue，非常方便快捷，建立的项目也可以统一风格。

原文：https://juejin.cn/post/7095603836072493086