Webpack的理解以及解決了的問題
- 2021 年 4 月 26 日
- 筆記
- CSS, javascript, VUE
一、背景
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的能力：
「編譯代碼能力」，提高效率，解決瀏覽器兼容問題「模塊整合能力」，提高性能，可維護性，解決瀏覽器頻繁請求文件的問題
「萬物皆可模塊能力」，項目維護性增強，支持不同種類的前端模塊類型，統一的模塊化方案，所有資源文件的加載都可以通過代碼控制
參考文獻
- //mp.weixin.qq.com/s/3eQvXFcXJJCpRqbkBCKJ5A
