一篇文章說清 webpack、vite、vue-cli、create-vue 的區別
webpack、vite、vue-cli、create-vue 這些都是什麼？看著有點暈，不要怕，我們一起來分辨一下。
先看這個表格：
| 腳手架 | vue-cli | create-vue |
| 構建項目 | vite | |
| 打包程式碼 | webpack | rollup |
- 腳手架：創建項目，選擇性安裝需要的插件，指定統一的風格，生成demo。
- 構建項目：建立項目的運行環境，需要手動安裝插件。
- 打包程式碼：程式碼寫好之後，為了更好的使用，需要打包處理一下。
是不是有了一個整體的感覺？我們再來詳細的看一下。
vue-cli
官網：//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
官網：//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
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
rollup 是一種打包工具，特點就是，打的包非常精簡，體積小。
官網是英文的，中文資料也比較少，不過好在常規用法可以參考 vite的官網。
webpack
尤雨溪在知乎的一次回答（//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，非常方便快捷，建立的項目也可以統一風格。
