五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

新手向 Webpack 完全攻略 – 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.jssearch_bar.jsfilter.js,透過有意義的命名讓管理變得更加容易。

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

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

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

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


👩‍🏫 課務小幫手:

✨ 想掌握 Webpack 觀念和原理嗎?

我們有開設 🏓 React 全攻略入門班 課程,課程內包含『Webpack 5 入門教學』線上課程喔 ! ❤️️

訂閱文章

  • 五倍的五倍券優惠活動