webpack和gulp都是熱門的前端構建工具，他們的區別是什么呢？
gulp的官網上是這樣介紹的，“gulp是一個工具包，可幫助您自動化開發工作流程中繁重而耗時的任務。”，說明gulp旨在強調自動化前端構造流程，通過用戶自定義配置一系列的任務(Task)，並排列好順序后執行，從而構建自動化流程。
讓我們再看下webpack的介紹，“webpack 是一個模塊打包器。它的主要目標是將 JavaScript 文件打包在一起，打包后的文件用於在瀏覽器中使用，但它也能夠勝任轉換（transform）、打包（bundle）或包裹（package）任何資源(resource or asset)。”，從而我們可以看出webpack側重的是模塊化前端開發流程，就像分類管理的概念，將相同東西（例如css文件，js文件，圖片文件）分類組成成單獨的模塊。
gulp基於（node）stream流處理文件的讀寫，打包、編譯速度快，有明晰的api，task流程，但是不包含模塊的概念，對於依賴的統計不是那么明白；
而webpack的基本概念就是模塊划分，集成了明確的依賴包和版本，新增插件的處理也很簡單，但是有繁雜的配置。這兩者各有優勢，可以合理搭配使用。
近來跟隨Vue3 新出 Vite 被稱為”下一代前端開發與構建工具“，基於原生ES-Moudle開發, 緊跟es6的潮流。
Vite 的特點
- 快速的冷啟動
- 即時的模塊熱更新
- 真正的按需編譯
光看這三點好像webpack也可以，但它的優越性在於利用 ES6 的 import 會發送請求去加載文件的特性，攔截這些請求，做一些預編譯，省去 webpack 冗長的打包時間.
Vite 同時利用 HTTP 頭來加速整個頁面的重新加載（再次讓瀏覽器為我們做更多事情）：源碼模塊的請求會根據 304 Not Modified 進行協商緩存，而依賴模塊請求則會通過 Cache-Control: max-age=31536000,immutable 進行強緩存，因此一旦被緩存它們將不需要再次請求。
Vite 使用 esbuild 預構建依賴。Esbuild 使用 Go 編寫，並且比以 JavaScript 編寫的打包器預構建依賴快 10-100 倍。
Vite的缺點？新出的打包工具缺乏穩定性和使用群落，兼容問題