新手向 Webpack 完全攻略 (1) – Webpack 簡介

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

什麼是 Webpack?

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

為什麼要使用 Webpack?

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

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

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

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

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

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

此分享轉載自五倍 Rails 工程師 Roy Huang 的開發筆記。