webpack 以現在而言又是個在背後默默無名的功臣，不過如果你在 vue-cli 或是 create-react-app 誕生之前就在使用 React 或 Vue 的話，你可能經歷過那個四處找 boilerplate, starter kit 之類的時代，或是像我一下到處找範例的設定來複製貼上，那時候寫一大堆的設定檔才能把專案從 js 跟 css 打包好，圖片也複製到輸出的資料夾，還有自動從樣版產生 html ，這些功能在 vue-cli 或 create-react-app 這類的工具出現後完全都被包裝並隱藏起來了，畢竟這些功能大部份的專案都會用到，那就都提供一份通用的設定就行，反正多寫的設定通常也不太會有什麼問題

是的， webpack 是個打包工具，而且還是個連圖片跟 css 都包的工具，關於這點可以從他們的網頁上的圖看出來，它幫你把專案所有的原始碼，靜態資源都處理好，產生出最後可以在瀏覽器中使用的檔案，在那之前根本沒有這種把圖片與 css 也視為可以打包的資源的工具， css 處理歸 css 工具管，圖片的處理歸圖片的管， js … 那之前也還沒有什麼把模組化用在前端的概念，就直接把檔案串起來吧，通常外面會再包一層 iife 避免污染到全域空間就是了

題外話， webpack 的設定真的是太複雜了，尤其是在 webpack 4 出來以前 (順帶一提，我是從 webpack 2 開始用的) ，雖然 webpack 4 的設定複雜問題其實根本沒改善，只是提供每個選項預設值，還有增加了 mode 的設定而已

rollup 雖然也是個打包工具，但處理的對像就大不相同了， rollup 最主要處理的是 library ，相較於 webpack 主要是處理網頁應用程式， rollup 基本上就是專注在處理 js 相關的東西上，雖然你也可以用 plugin 擴充它處理其它類型檔案的能力，至於這工具到底比起 webpack ，有什麼優勢讓它更適合處理 library 我想留到之後再詳細介紹

雖然在瀏覽器開始原生支援 es6 module 與 http2 甚至 http3 (目前應該只有 chrome 使用的還在實驗中的 QUIC 協定)， js 有能力自己宣告與載入自己的相依套件，下載多個檔案也不用耗費大量的成本來建立連線的情況下， bundler 將檔案全部打包成一個的功能可能慢慢的變得不再需要，不過以 webpack 而言也不是只有打包成一個檔案的功能，它實際上還可以對檔案做轉換而做到很多事，比如像 css module 的支援之類的，就必須要靠 webpack 這種能同時處理 css 與 js 的 bundler 才會比較方便達成，不然就是要先編譯 css ，然後拿產生的 js 的 class 對應表去 js 裡用

下一篇終於要開始實際應用了