一篇文章說清 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 子產品​​​ 提供了​​豐富的内建功能​​​，如速度快到驚人的​​子產品熱更新（HMR）​​。
• 一套建構指令，它使用​​Rollup​​ 打包你的代碼，并且它是預配置的，可輸出用于生産環境的高度優化過的靜态資源。

使用 vite 不僅可以建立 vue 的項目，而且可以建立 react 等項目，隻是需要手動安裝第三方插件，有點麻煩。

目前支援的模闆預設如下：

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

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 是後起之秀，打包更簡潔。