iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
2
Modern Web

前端建置工具完全手冊系列 第 3

Day 3: Bundler: webpack 與 rollup

  • 分享至 

  • xImage
  •  

webpack 以現在而言又是個在背後默默無名的功臣,不過如果你在 vue-cli 或是 create-react-app 誕生之前就在使用 React 或 Vue 的話,你可能經歷過那個四處找 boilerplate, starter kit 之類的時代,或是像我一下到處找範例的設定來複製貼上,那時候寫一大堆的設定檔才能把專案從 js 跟 css 打包好,圖片也複製到輸出的資料夾,還有自動從樣版產生 html ,這些功能在 vue-clicreate-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 裡用

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


上一篇
Day 2: Transpiler: babel & postcss
下一篇
Day 4: babel 的使用與設定
系列文
前端建置工具完全手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言