請注意，這是一篇站在完全新手的角度上來寫的文章?？赡苣闶且粋€后端人員想了解前端工具的使用和概念;也可能你是一個前端小菜（還在DIV+CSS的世界里掙扎著）。本文比較適合那些以前完全沒有接觸過WebPack，而又想使用的朋友。通過本文你能理解webPack工作原理及做用?。ú粫劣诳戳税胩熨Y料還沒有頭緒?。?

前言：本人是一個從后端轉(zhuǎn)向前端的程序猿，在此之前對于前端的印象一直是：HTML + CSS + JS。完全沒有想過前端會發(fā)展的如此的迅速，各種名詞的出現(xiàn)：Node、NPM、Grunt、Gulp、Bower、Webpack、Browserify、Yeoman。瞬間讓感覺到不知道如何下手（好像根本學(xué)不完的樣子）！

先上一張別人的圖,目前的前端工具！

一、背景

如果你和我一樣，之前對于前端打包工具的發(fā)展一無所知，甚至于不知道這些工具出現(xiàn)的必要性。你可以瀏覽此部分的內(nèi)容，如果你不想知道這些或者對這些并不感興趣，可以直接跳過此部分。

互聯(lián)網(wǎng)程序現(xiàn)狀

隨著移動互聯(lián)的來襲，當(dāng)前越來越多的網(wǎng)站已經(jīng)從單純的網(wǎng)頁模式，開始升級為webapp模式。它們運行在現(xiàn)代的瀏覽器中，使用HTML5、CSS3、ES6等技術(shù)開發(fā)，已經(jīng)從單一的瀏覽功能轉(zhuǎn)變?yōu)橐粋€基于瀏覽器的富客戶端。并且webapp通常是一個SPA(Single Page Application 單頁面應(yīng)用)。每個頁面（View）通過異步的方式加載，有著良好的用戶體驗。但是這樣做的結(jié)果是導(dǎo)致程序初始化和使用的過程中需要更多、更復(fù)雜的JavaScript代碼來實現(xiàn)，這就對前端程序的開發(fā)帶來巨大的挑戰(zhàn)！

模塊化系統(tǒng)的演變

隨著程序的復(fù)雜性的增加，項目結(jié)構(gòu)的龐大。把單一js文件按職責(zé)進行模塊化劃分。

我們在寫頁面的時候會這樣寫：