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

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

先看这个表格：

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

• 脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。
• 构建项目：建立项目的运行环境，需要手动安装插件。
• 打包代码：代码写好之后，为了更好的使用，需要打包处理一下。

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

vue-cli

官网：Vue CLI

Vue CLI 的包名称由 vue-cli（vue-cli2.x版本） 改成了 @vue/cli（@vue/cli3.x及以上版本）

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

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

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

create-vue

官网：快速上手 | Vue.js

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

官网：Vite | 下一代的前端工具链

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

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

​​​​​​​你可以在 为什么选 Vite 中了解更多关于项目的设计初衷。

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

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

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

rollup

官网：rollup.js

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

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

rollup中文网：rollup.js 中文文档 | rollup.js中文网

webpack

中文官网：webpack | webpack 中文文档 | webpack 中文网

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

尤雨溪在知乎的一次回答依赖图(dependency graph)

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，非常方便快捷，建立的项目也可以统一风格。

​