Webpack是什麼？

背景

webpack的做者是德國紐倫堡Tobias Koppers,   webpack的誕生之初主要是想解決代碼的拆分問題。這也是webpack這麼受歡迎的緣由所在。同時也離不開500多位開源貢獻者。

解釋

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每一個模塊，並生成一個或多個 _bundle_。

這是官方文檔給出的webpack的解釋，這裏我提取幾個關鍵詞理解。

理解模塊

模塊,又稱構件,是可以單獨命名並獨立地完成必定功能的程序語句的集合（即程序代碼和數據結構的集合體）。它具備兩個基本的特徵：外部特徵和內部特徵。外部特徵是指模塊跟外部環境聯繫的接口（即其餘模塊或程序調用該模塊的方式，包括有輸入輸出參數、引用的全局變量）和模塊的功能；內部特徵是指模塊的內部環境具備的特色（即該模塊的局部數據和程序代碼）。

以上是百度百科給模塊的定義，前端模塊化通常指javascript的模塊，最多見的模塊就是npm包。每個模塊多是最小甚至是最優的代碼組合。

靜態模塊打包工具

將javascript代碼、與其餘靜態文件組成的不一樣模塊，進行分析、解析壓縮打包成瀏覽器可識別的代碼的過程。

依賴圖（dependency graph）

任什麼時候候，一個文件依賴於另外一個文件，webpack 就把此視爲文件之間有_ 依賴關係_。webpack從命令行或配置文件定義的一個模塊列表開始，處理你的應用程序；從入口開始webpack遞歸的構建一個依賴圖，這個依賴圖包含着應用程序中所需的每一個模塊，而後將這些模塊打包成少許的bubdle,使瀏覽器能夠執行。

經過上圖可以簡單理解，webpack就像一個黑盒子，經過這個黑盒子的模塊（js、ts、png、sass等），將最終轉化成瀏覽器可識別的文件。

Webpack能作什麼？

代碼轉換、文件優化、代碼分割、模塊合併、自動刷新、代碼校驗、自動發佈

參考：
百度百科模塊定義
官網給出的模塊解釋
官網依賴圖解釋