一、背景

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

模塊化

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

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

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

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

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

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

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

這種方式也并沒有解決第一種方式的依賴等問題

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

// module-a.js
(function ($) {
  var name = 'module-a'

  function method1 () {
    console.log(name + '#method1')
    $('body').animate({ margin: '200px' })
  }

  window.moduleA = {
    method1: method1
  }
})(jQuery)

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

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

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

二、問題

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

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

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

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

而webpack恰巧可以解決以上問題

三、是什么

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

• 靜態(tài)模塊

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

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

image

webpack的能力：

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

image

image

image