請(qǐng)注意，這是一篇站在完全新手的角度上來(lái)寫的文章?？赡苣闶且粋€(gè)后端人員想了解前端工具的使用和概念;也可能你是一個(gè)前端小菜（還在DIV+CSS的世界里掙扎著）。本文比較適合那些以前完全沒(méi)有接觸過(guò)WebPack，而又想使用的朋友。通過(guò)本文你能理解webPack工作原理及做用?。ú粫?huì)至于看了半天資料還沒(méi)有頭緒?。?
前言：本人是一個(gè)從后端轉(zhuǎn)向前端的程序猿，在此之前對(duì)于前端的印象一直是：HTML + CSS + JS。完全沒(méi)有想過(guò)前端會(huì)發(fā)展的如此的迅速，各種名詞的出現(xiàn)：Node、NPM、Grunt、Gulp、Bower、Webpack、Browserify、Yeoman。瞬間讓感覺(jué)到不知道如何下手（好像根本學(xué)不完的樣子）！
先上一張別人的圖,目前的前端工具！
一、背景
如果你和我一樣，之前對(duì)于前端打包工具的發(fā)展一無(wú)所知，甚至于不知道這些工具出現(xiàn)的必要性。你可以瀏覽此部分的內(nèi)容，如果你不想知道這些或者對(duì)這些并不感興趣，可以直接跳過(guò)此部分。
互聯(lián)網(wǎng)程序現(xiàn)狀
隨著移動(dòng)互聯(lián)的來(lái)襲，當(dāng)前越來(lái)越多的網(wǎng)站已經(jīng)從單純的網(wǎng)頁(yè)模式，開(kāi)始升級(jí)為webapp模式。它們運(yùn)行在現(xiàn)代的瀏覽器中，使用HTML5、CSS3、ES6等技術(shù)開(kāi)發(fā)，已經(jīng)從單一的瀏覽功能轉(zhuǎn)變?yōu)橐粋€(gè)基于瀏覽器的富客戶端。并且webapp通常是一個(gè)SPA(Single Page Application 單頁(yè)面應(yīng)用)。每個(gè)頁(yè)面（View）通過(guò)異步的方式加載，有著良好的用戶體驗(yàn)。但是這樣做的結(jié)果是導(dǎo)致程序初始化和使用的過(guò)程中需要更多、更復(fù)雜的JavaScript代碼來(lái)實(shí)現(xiàn)，這就對(duì)前端程序的開(kāi)發(fā)帶來(lái)巨大的挑戰(zhàn)！
模塊化系統(tǒng)的演變
隨著程序的復(fù)雜性的增加，項(xiàng)目結(jié)構(gòu)的龐大。把單一js文件按職責(zé)進(jìn)行模塊化劃分。
我們?cè)趯戫?yè)面的時(shí)候會(huì)這樣寫：
