前端為什么需要打包工具？
對(duì)于 Webpack，很多人的第一印象肯定是 “打包工具”。
那前端為什么需要打包工具呢？
打包工具出現(xiàn)之前，前端開(kāi)發(fā)有什么問(wèn)題？
我們真的需要打包工具嗎？
隨著互聯(lián)網(wǎng)的發(fā)展，前端項(xiàng)目越來(lái)越復(fù)雜，同時(shí)，V8 引擎也讓 JavaScript 這門(mén)玩具語(yǔ)言，插上了商業(yè)項(xiàng)目開(kāi)發(fā)的翅膀，讓 JS 不再受瀏覽器環(huán)境的束縛，開(kāi)始進(jìn)軍系統(tǒng)級(jí)別開(kāi)發(fā)領(lǐng)域。
而隨著項(xiàng)目的復(fù)雜度升級(jí)，代碼規(guī)范和管理就必須要同步提升，于是，編程社區(qū)中提出了多種模塊化規(guī)范。服務(wù)端選擇了 CommonJS 規(guī)范，客戶(hù)端選擇 AMD 規(guī)范較多，但是，兩種模塊化規(guī)范也都存在一定的問(wèn)題。他們都是 JS 編程，有兩個(gè)不同的模塊化規(guī)范，在 JS 語(yǔ)言層面還是不夠的。
終于在 ES6 中，ECMA 委員會(huì)推出了語(yǔ)言層面模塊系統(tǒng)：ESModules 規(guī)范。
在目前的編程實(shí)踐中，前端編程得益于構(gòu)建工具的發(fā)展，編碼過(guò)程中使用 ESModules 規(guī)范進(jìn)行編碼是非常廣泛的，但是后端依然使用 CommonJS 規(guī)范較多，不過(guò) NodeJS 方面已經(jīng)做出改變，逐漸趨向于 ESModules 規(guī)范。
我們來(lái)一點(diǎn)代碼，簡(jiǎn)單看一下 ES Modules 的語(yǔ)法特性。
模塊化可以幫助我們更好地解決復(fù)雜應(yīng)用開(kāi)發(fā)過(guò)程中的代碼組織問(wèn)題，但是隨著模塊化思想的引入，我們的前端應(yīng)用又會(huì)產(chǎn)生了一些新的問(wèn)題，比如：
首先，我們所使用的 ES Modules 模塊系統(tǒng)本身就存在環(huán)境兼容問(wèn)題。盡管現(xiàn)如今主流瀏覽器的最新版本都支持這一特性，但是目前還無(wú)法保證用戶(hù)的瀏覽器使用情況。所以我們還需要解決兼容問(wèn)題。
其次，模塊化的方式劃分出來(lái)的模塊文件過(guò)多，而前端應(yīng)用又運(yùn)行在瀏覽器中，每一個(gè)文件都需要單獨(dú)從服務(wù)器請(qǐng)求回來(lái)。零散的模塊文件必然會(huì)導(dǎo)致瀏覽器的頻繁發(fā)送網(wǎng)絡(luò)請(qǐng)求，影響應(yīng)用的工作效率。
最后，談一下在實(shí)現(xiàn) JS 模塊化的基礎(chǔ)上的發(fā)散。隨著應(yīng)用日益復(fù)雜，在前端應(yīng)用開(kāi)發(fā)過(guò)程中不僅僅只有 JavaScript 代碼需要模塊化，HTML 和 CSS 這些資源文件也會(huì)面臨需要被模塊化的問(wèn)題。而且從宏觀角度來(lái)看，這些文件也都應(yīng)該看作前端應(yīng)用中的一個(gè)模塊，只不過(guò)這些模塊的種類(lèi)和用途跟 JavaScript 不同。
對(duì)于開(kāi)發(fā)過(guò)程而言，模塊化肯定是必要的，所以我們需要在前面所說(shuō)的模塊化實(shí)現(xiàn)的基礎(chǔ)之上引入更好的方案或者工具，去解決上面提出的 3 個(gè)問(wèn)題，讓我們的應(yīng)用在開(kāi)發(fā)階段繼續(xù)享受模塊化帶來(lái)的優(yōu)勢(shì)，又不必?fù)?dān)心模塊化對(duì)生產(chǎn)環(huán)境所產(chǎn)生的影響。
相信你已經(jīng)想到了，這就是 Webpack 等一系列打包工具出現(xiàn)的原因，上面的問(wèn)題，就是這類(lèi)工具核心要解決的問(wèn)題。
本質(zhì)上，Webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器 (module bundler)。
推薦閱讀：
前端工程化中的重要環(huán)節(jié)——自動(dòng)化構(gòu)建
如何使用 Webpack 實(shí)現(xiàn)模塊化打包？
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧！