Hi～Dai Gei Ho，我是Winnie，今天是2021/09/16 ，是個對我來說別具意義的一天，希望大家都要健康快樂。（ 夜深了，突然想來碎唸下XD。

回歸正題，在前兩天的文章中，我們簡單的介紹了下 模組 與 JS模組化規範的演化過程，同時也稍微了解 打包工具 的出現 是為了解決 過去模組化規範與ES6 Module可能造成瀏覽器不支援 或著 其他服務端版本不相容 的問題。 但是針對 打包工具介紹 目前算是都還沒有提到。所以此篇文章 將會針對 現有 打包工具的用途 與 Module bundler模式進行介紹。

前端打包工具

在之前的文章我們已經有簡單提到 打包工具 主要目的是將各種可能使用到的 Preprocess工具跟前端框架(如：Vue、React、Sass 等)檔案進行轉譯壓縮成一支主要的JS，而這樣的好處就是不僅讓 瀏覽器可以讀懂程式碼 之外，也可以透過 少量的HTTP request 來請求所需要的資源。

Module bundler 運作模式：

如上圖，其運作模式會依照 進入點 來分析專案的架構，並且透過每個Module間的相互依賴 來載入，當等所有 modules 都載入完畢，就會開始執行壓縮，把需要的檔案全部打包成一隻bundle.js檔案，最後透過 引入進HTML中 ，而這樣的模式 就稱之為 Module bundler。
而在眾多的前端打包工具中，在前端技術圈 廣為人知的Webpack 也是採取 Bundle 模式來進行打包，運作方式如下圖。

而在圖片中，不知道大家有沒有發現，Webpack除了能打包JS模組之外， 他們還可以 將圖片、scss、ES6語法等進行打包，為什麼可以這樣做呢？這是因為他們延伸了 模組化 的概念，將任何資源視為一個模組 ，同時定義許多 loader（載入器） 來識別檔案類型並且進行轉譯，讓瀏覽器可以讀懂。(但因為今天主角不是Webpack，所以就不一一介紹要如何使用了了XD)

而這也就是為什麼 能讓沒用過Webpack的人 也能在江湖聽過他的名字的原因了。

小結：

好的，在今天終於將 前端打包工具的用途 與 打包運作模式 簡單的介紹完了，希望可以讓大家對於 傳統打包工具 有些許了解，而下篇將會進入 題目的主軸 Vite 開始正式介紹 (終於啊 撒花！！)
以上謝謝大家的觀看，如有錯誤的地方，再麻煩大家給予指教，謝謝

再補充一下：其實在前端打包工具中，還有一個 Native ESM 的運作模式，但因為我覺得這個模式 是Vite 背後核心，所以我將它單獨拆出來放在接下的文章中了。