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