一、背景
Webpack 最初的目標是實現前端專案的模組化，旨在更高效地管理和維護專案中的每一個資源
模組化
最早的時候，我們會通過檔案劃分的形式實現模組化，也就是將每個功能及其相關狀態資料各自單獨放到不同的JS 檔案中
約定每個檔案是一個獨立的模組，然後再將這些js檔案引入到頁面，一個script標籤對應一個模組，然後呼叫模組化的成員
<script src="module-a.js"></script>
<script src="module-b.js"></script>
但這種模組弊端十分的明顯，模組都是在全域性中工作，大量模組成員汙染了環境，模組與模組之間並沒有依賴關係、維護困難、沒有私有空間等問題
專案一旦變大，上述問題會尤其明顯
隨後，就出現了名稱空間方式，規定每個模組只暴露一個全域性物件，然後模組的內容都掛載到這個物件中
window.moduleA = {
method1: function () {
console.log('moduleA#method1')
}
}
這種方式也並沒有解決第一種方式的依賴等問題
再後來，我們使用立即執行函式為模組提供私有空間，通過引數的形式作為依賴宣告，如下
// module-a.js
(function ($) {
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').animate({ margin: '200px' })
}
window.moduleA = {
method1: method1
}
})(jQuery)
上述的方式都是早期解決模組的方式，但是仍然存在一些沒有解決的問題。例如，我們是用過script標籤在頁面引入這些模組的，這些模組的載入並不受程式碼的控制，時間一久維護起來也十分的麻煩
理想的解決方式是，在頁面中引入一個JS入口檔案，其餘用到的模組可以通過程式碼控制，按需載入進來
除了模組載入的問題以外，還需要規定模組化的規範，如今流行的則是CommonJS、ES Modules
二、問題
從後端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery開發，再到目前的三大框架Vue、React、Angular
開發方式，也從javascript到後面的es5、es6、7、8、9、10，再到typescript，包括編寫CSS的前處理器less、scss等
現代前端開發已經變得十分的複雜，所以我們開發過程中會遇到如下的問題：
- 需要通過模組化的方式來開發
- 使用一些高階的特性來加快我們的開發效率或者安全性，比如通過ES6+、TypeScript開發指令碼邏輯，通過sass、less等方式來編寫css樣式程式碼
- 監聽檔案的變化來並且反映到瀏覽器上，提高開發的效率
- JavaScript 程式碼需要模組化，HTML 和 CSS 這些資原始檔也會面臨需要被模組化的問題
- 開發完成後我們還需要將程式碼進行壓縮、合併以及其他相關的優化
而webpack恰巧可以解決以上問題
三、是什麼
webpack 是一個用於現代JavaScript應用程式的靜態模組打包工具
- 靜態模組
這裡的靜態模組指的是開發階段，可以被 webpack 直接引用的資源（可以直接被獲取打包進bundle.js的資源）
當 webpack處理應用程式時，它會在內部構建一個依賴圖，此依賴圖對應對映到專案所需的每個模組（不再侷限js檔案），並生成一個或多個 bundle
webpack的能力：
「編譯程式碼能力」，提高效率，解決瀏覽器相容問題
「模組整合能力」，提高效能，可維護性，解決瀏覽器頻繁請求檔案的問題
「萬物皆可模組能力」，專案維護性增強，支援不同種類的前端模組型別，統一的模組化方案，所有資原始檔的載入都可以通過程式碼控制
參考文獻
- https://mp.weixin.qq.com/s/3eQvXFcXJJCpRqbkBCKJ5A