一、背景

Webpack 最初的目標(biāo)是實(shí)現(xiàn)前端項(xiàng)目的模塊化，旨在更高效地管理和維護(hù)項(xiàng)目中的每一個(gè)資源

模塊化

最早的時(shí)候，我們會(huì)通過(guò)文件劃分的形式實(shí)現(xiàn)模塊化，也就是將每個(gè)功能及其相關(guān)狀態(tài)數(shù)據(jù)各自單獨(dú)放到不同的JS 文件中

約定每個(gè)文件是一個(gè)獨(dú)立的模塊，然后再將這些js文件引入到頁(yè)面，一個(gè)script標(biāo)簽對(duì)應(yīng)一個(gè)模塊，然后調(diào)用模塊化的成員

<script src="module-a.js"></script>
<script src="module-b.js"></script>

但這種模塊弊端十分的明顯，模塊都是在全局中工作，大量模塊成員污染了環(huán)境，模塊與模塊之間并沒(méi)有依賴關(guān)系、維護(hù)困難、沒(méi)有私有空間等問(wèn)題

項(xiàng)目一旦變大，上述問(wèn)題會(huì)尤其明顯

隨后，就出現(xiàn)了命名空間方式，規(guī)定每個(gè)模塊只暴露一個(gè)全局對(duì)象，然后模塊的內(nèi)容都掛載到這個(gè)對(duì)象中

window.moduleA = {method1: function () {console.log('moduleA#method1')}
}

這種方式也并沒(méi)有解決第一種方式的依賴等問(wèn)題

再后來(lái)，我們使用立即執(zhí)行函數(shù)為模塊提供私有空間，通過(guò)參數(shù)的形式作為依賴聲明，如下

// module-a.js
(function ($) {var name = 'module-a'function method1 () {console.log(name + '#method1')$('body').animate({ margin: '200px' })}window.moduleA = {method1: method1}
})(jQuery)

上述的方式都是早期解決模塊的方式，但是仍然存在一些沒(méi)有解決的問(wèn)題。例如，我們是用過(guò)script標(biāo)簽在頁(yè)面引入這些模塊的，這些模塊的加載并不受代碼的控制，時(shí)間一久維護(hù)起來(lái)也十分的麻煩

理想的解決方式是，在頁(yè)面中引入一個(gè)JS入口文件，其余用到的模塊可以通過(guò)代碼控制，按需加載進(jìn)來(lái)

除了模塊加載的問(wèn)題以外，還需要規(guī)定模塊化的規(guī)范，如今流行的則是CommonJS、ES Modules

二、問(wèn)題

從后端渲染的JSP、PHP，到前端原生JavaScript，再到j(luò)Query開(kāi)發(fā)，再到目前的三大框架Vue、React、Angular

開(kāi)發(fā)方式，也從javascript到后面的es5、es6、7、8、9、10，再到typescript，包括編寫(xiě)CSS的預(yù)處理器less、scss等

現(xiàn)代前端開(kāi)發(fā)已經(jīng)變得十分的復(fù)雜，所以我們開(kāi)發(fā)過(guò)程中會(huì)遇到如下的問(wèn)題：

• 需要通過(guò)模塊化的方式來(lái)開(kāi)發(fā)
• 使用一些高級(jí)的特性來(lái)加快我們的開(kāi)發(fā)效率或者安全性，比如通過(guò)ES6+、TypeScript開(kāi)發(fā)腳本邏輯，通過(guò)sass、less等方式來(lái)編寫(xiě)css樣式代碼
• 監(jiān)聽(tīng)文件的變化來(lái)并且反映到瀏覽器上，提高開(kāi)發(fā)的效率
• JavaScript 代碼需要模塊化，HTML 和 CSS 這些資源文件也會(huì)面臨需要被模塊化的問(wèn)題
• 開(kāi)發(fā)完成后我們還需要將代碼進(jìn)行壓縮、合并以及其他相關(guān)的優(yōu)化

而webpack恰巧可以解決以上問(wèn)題

三、是什么

webpack 是一個(gè)用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具

靜態(tài)模塊

這里的靜態(tài)模塊指的是開(kāi)發(fā)階段，可以被 webpack 直接引用的資源（可以直接被獲取打包進(jìn)bundle.js的資源）

當(dāng) webpack處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部構(gòu)建一個(gè)依賴圖，此依賴圖對(duì)應(yīng)映射到項(xiàng)目所需的每個(gè)模塊（不再局限js文件），并生成一個(gè)或多個(gè) bundle

webpack的能力：

編譯代碼能力，提高效率，解決瀏覽器兼容問(wèn)題

模塊整合能力，提高性能，可維護(hù)性，解決瀏覽器頻繁請(qǐng)求文件的問(wèn)題

萬(wàn)物皆可模塊能力，項(xiàng)目維護(hù)性增強(qiáng)，支持不同種類的前端模塊類型，統(tǒng)一的模塊化方案，所有資源文件的加載都可以通過(guò)代碼控制