前面先接觸了一下webpack這個東西抵乓，那這個webpack到底是干什么的，為什么要用webpack呢？這篇文章主要講一講為什么要用webpack
官方的概念
- 本質(zhì)上失暴，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應用程序時微饥，它會遞歸地構建一個依賴關系圖(dependency graph)逗扒，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle欠橘。
這是說的什么意思呢矩肩？其中官方的話有主要的兩個概念：1. 打包，2.模塊
為什么要打包
然后讓我們從一個html頁面說起肃续，下面的代碼可以看到黍檩，我在html頁面中通過script標簽引入了3個JavaScript文件a.js，b.js和c.js始锚，每個文件中分別定義了一個函數(shù)并導出（export）給外部用刽酱。并且它們之間有一定的依賴關系，c.js依賴于b.js瞧捌，b.js依賴于a.js棵里。
|- index.html
|- main.css
| - a.js
| - b.js
| - c.js
// index.html
<!doctype html>
<html>
<head><link href="main.css" rel="stylesheet"></head>
<body>
<div>hello world</div>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
</body>
</html>
// a.js
export default function () {
return a + b;
}
// b.js
import add from 'a';
export default function (c, d) {
return c / add(c, d);
}
// c.js
import percentage from 'b';
export default function (e, f) {
console.log(percentage(e, f));
}
因為有3個js文件，所以瀏覽器需要發(fā)送三次http 請求來獲取這三個文件，然后依次執(zhí)行其中的代碼衍慎，如果其中有一個文件因為網(wǎng)絡問題而延誤了時間转唉，那么整個頁面的顯示也會被延誤。3個文件還好稳捆，而當我們的項目逐漸變大赠法，有幾十個到上百個JavaScript文件的時候，那問題會更嚴重乔夯，不但有延遲問題砖织，還會遇到很難維護的問題 — 想想如何維護上百個文件的依賴關系？
這時候你會想末荐，是不是我把所有JavaScript文件合成一個文件就好了呢侧纯？沒錯，我們確實可以這樣做甲脏，這樣就減少了http請求數(shù)量眶熬，讓我們的頁面加載和顯示更快。不過這個合并的階段是在開發(fā)完成之后才進行的块请，也就是說開發(fā)階段我仍然是有a.js娜氏，b.js和c.js等等這些文件的，這樣才好開發(fā)和維護墩新，因為如果開發(fā)階段就合并的話贸弥，就相當于我基于一個可能上萬行的文件進行開發(fā)，這樣的代碼是沒法維護的海渊。
在開發(fā)后完成的這個合并的過程就是打包绵疲，這樣你就明白為什么要打包了吧。webpack在打包過程中臣疑，會分析各個文件之間的依賴關系盔憨，然后生成一個依賴圖并用文件的形式保存下來，未來瀏覽器運行代碼的時候就可以讀取這個文件讯沈，就知道了各個代碼塊之間的關聯(lián)以及如何調(diào)用了般渡。
上面只是用JavaScript文件來舉例子，實際上webpack可以支持多種文件類型的打包芙盘，如css驯用，sass，jpg儒老，svg等等蝴乔。
什么是模塊
上面的3個文件，每個文件都可以看做是一個模塊驮樊，在JavaScript中可以把模塊看做是一堆代碼薇正，這堆代碼可以被復用片酝，執(zhí)行某個具體的操作，從表象上來看就是一個模塊就是一個文件挖腰，其中包含了export這樣的關鍵字用來將模塊的功能導出給外部用雕沿。
// b.js
import add from 'a';
export default function (c, d) {
return c / add(c, d);
}
從b.js這個文件/模塊中就可以看出，首先從a模塊中導入了一個函數(shù)猴仑，然后定義了一個新的函數(shù)审轮，并通過export 導出。
官方講解模塊
總結
打包是webpack最核心的功能辽俗，webpack其它所有的功能都是為了讓打包這個功能更好疾渣。我們從一個簡單的html頁面介紹了通過webpack對模塊進行打包，既保留了單個模塊的可維護性崖飘，又減少了頁面的http請求榴捡，減少了頁面加載時間，從而增加了頁面的顯示速度朱浴，讓整個應用的體驗更好吊圾。
