“學而時習之，不亦樂乎？”

前陣子認真學習了下webpack，趁今天這個機會來做一次總結，或者說是分享，畢竟好記性不如爛筆頭嘛！

整篇筆記將從三個維度來介紹一下webpack，是什麼，為什麼，怎麼用？個人以為這是比較符合人類直覺的，這篇文章主要講前兩點，第三點內容比較豐富，單獨抽離，閒話少敘，let's go!

1. webpack到底是個啥？

webpack官網的概念一節中是這麼描述的：

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle

。

這段話裡面有三個關鍵詞：靜態模組，dependency graph，bundle。從官網首頁給出的圖我們可以得知所謂靜態模組，指的不外乎就是：js指令碼，css樣式表，圖片，字型等

（注：相對靜態資源來說，還有一個概念叫動態資源(dynamic resource)，它是指在開發階段，不能被 webpack 直接引用的資源。這些資源都是通過專案上線之後，通過瀏覽器在執行時動

態獲取的檔案）。那麼什麼是依賴關係圖呢？不急，讓我們再看官網如何解釋：

webpack 從命令列或配置檔案中定義的一個模組列表開始，處理你的應用程式。 從這些入口起點開始，webpack 遞迴地構建一個 依賴圖 ，這個依賴圖包含著應用程式所需的每個模組，然後將所有這些模組打包為少量的 bundle - 通常只有一個 - 可由瀏覽器載入。

簡言之，構建程式就像一個拼圖遊戲，所有的靜態資原始檔都是零零散散的元件，而依賴關係圖就是遊戲原圖，webpack就是根據這張原圖將所有零件組裝成成品，即所謂的

bundle，至於如何構建依賴關係圖，便不是本節所介紹的內容了，將在後面的文章中有所介紹。

2.幹嘛要用webpack？

想想看，在我們沒有webpack的時候，把所有資源統一放在一個資料夾裡手動進行管理,在檔案中通過<script>隱式引用js檔案，這樣做有什麼弊病嘛？還是看官方文件指南一節，明確指出,使用這種方式去管理 JavaScript 專案會有一些問題：

1.無法立即體現，指令碼的執行依賴於外部擴充套件庫(external library)。
2.如果依賴不存在，或者引入順序錯誤，應用程式將無法正常執行。
3.如果依賴被引入但是並沒有使用，瀏覽器將被迫下載無用程式碼。

這裡透露出使用以前的檔案管理方式會帶來至少三個問題：

1.依賴關係不直觀,程式可讀性差。
2.引用順序易出錯,程式安全性及可維護性差。
3.錯誤引用浪費資源，汙染全域性變數，程式安全性差。

那麼webpack是怎麼解決這些個問題的呢？是的，模組化。以下，是官網對模組的介紹：

在模組化程式設計中，開發者將程式分解成離散功能塊(discrete chunks of functionality)，並稱之為模組。
每個模組具有比完整程式更小的接觸面，使得校驗、除錯、測試輕而易舉。 精心編寫的模組提供了可靠的抽象和封裝界限，使得應用程式中每個模組都具有條理清楚的設計和明確的目的。

模組化通過定義區域性化的私有變數和函式，並組織函式的呼叫有效解決了命名衝突、全域性變數汙染的問題，並大大提高了程式的可讀性以及可維護性。常見的模組化規範有CommonJS、

AMD(require.js)、ES6模組化、css模組化，而webpack正是集大成者，支援以上所有規範，不僅如此，在Webpack裡一切檔案皆模組。通過loader轉換檔案，通過plugin注入鉤子，最後輸出

由多個模組組合的檔案。（loader,plugin將在下一篇文章中有所介紹），當然，webpack不僅僅是一個打包機，它的強大遠不止於此，比如：

程式碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
檔案優化：壓縮 JavaScript、CSS、HTML 程式碼，壓縮合並圖片等。
程式碼分割：提取多個頁面的公共程式碼、提取首屏不需要執行部分的程式碼讓其非同步載入。
模組合併：在採用模組化的專案裡會有很多個模組和檔案，需要構建功能把模組分類合併成一個檔案。
自動重新整理：監聽本地原始碼的變化，自動重新構建、重新整理瀏覽器。
程式碼校驗：在程式碼被提交到倉庫前需要校驗程式碼是否符合規範，以及單元測試是否通過。
自動釋出：更新完程式碼後，自動構建出線上釋出程式碼並傳輸給釋出系統。

說到這裡，webpack是什麼，為什麼需要webpack打包工具，相信大家心裡都有了一個大概的輪廓，在下篇文章中我們將具體講一講如何使用搭建一個webpack開發環境。

文章中有何謬誤，還請各位斧正，在下前端新人一枚，請多寬宥！

推薦閱讀：

• [1] webpack官網

• [2] 深入淺出Webpack