本學習筆記皆參考 Stephan Grider 在 Udemy 上所發表的付費課程 Webpack 2: The Complete Developers Guide,倘若對於本課程有興趣,非常推薦選修該課程。


什麼是 Webpack?

Webpack 是一個 JavaScript 的建構工具,負責將無數的 JavaScript 檔案整合成一個檔案。

為什麼要使用 Webpack?

由於近代的網頁應用開發慢慢走向了「一頁式應用」(Single Page Application),JavaScript 也開始佔了非常重要的角色,而同時 JavaScript 在應用程式當中的比例也呈現爆炸性的成長,因此我們必須想辦法降低 JavaScript 的複雜度並進行妥善的管理。

而在早期的應用程式當中,有可能只有兩三個主要的 JavaScript 檔案,但是裡面卻有上千行的程式碼,這樣的方式非常不易於管理與維護。想像一下,假設你今天需要修改網頁上的某個區塊,你要花多少時間去尋找對應的程式碼、並確認有沒有關聯的部分需要一併處理,以免弄壞別的功能?

因此,目前的開發也慢慢傾向將 JavaScript 模組化,例如我們會將 JavaScript 分成footer.jssearch_bar.jsfilter.js,透過有意義的命名讓管理變得更加容易。

但這樣的管理方式也是個雙面刃,主要的缺點有兩個。首先,JavaScript 的模組之間可能會有依賴性。假設 JavaScript A 裡面會用到 JavaScript B 的模組,那我們就必須要先讀取 B 再讀取 A,這樣才不會出現錯誤。再者,假設們把三四個 JavaScript 拆成三、四十個檔案,會對頁面讀取的效能造成極大的影響,而這個缺點在行動裝置上將會特別明顯。

而 Webpack 的出現就是為了解決這樣子的問題。Webpack 會將你所有的 JavaScript連結成一個檔案,而更重要的是,他會確保所有 JavaScript 的讀取順序是正確的,讓你不需要再擔心依賴性的問題。

而 Webpack 的功用當然不僅於此,透過 Loader 可以將 JavaScript ES6 編譯成各個瀏覽器都通用的 ES5,或是編譯 CSS 甚至是圖片等等,但是最主要的核心功能還是將所有的 JavaScript 包成一個檔案,讓開發者可以同時兼顧網頁效能以及後續的維護便利性。