這篇文章是翻譯的pro react 的webpack appendix A淮腾。
webpack是什么锭部？
通過幾年的javascript發(fā)展曼验，網(wǎng)頁的javascript代碼從幾乎沒有或者一兩個(gè)文件發(fā)展到具有復(fù)雜的javascript代碼和復(fù)雜的javascript依賴數(shù)养叛。
幫助處理javascript越來越復(fù)雜崔慧，社區(qū)提出了一些方法來處理這個(gè)問題：
- javascript的模塊化（module），把大的javascript文件分開可缚，不同的功能的javascript放到不同的文件中霎迫。
- 預(yù)處理或者預(yù)編譯（pre-processor），可以把現(xiàn)階段瀏覽器不支持的語言比如coffeescript帘靡，es6等等來編譯成為'原生'的javascript知给。
盡管這些方法非常有幫助，但是相應(yīng)的我們在開發(fā)階段需要多引入一個(gè)步驟-打包和編譯步驟描姚，我們需要綁定javascript文件和編譯這些javascript涩赢。這個(gè)就是webpack可以大顯神通的地方。
webpack是一個(gè)模塊打包工具轰胁，一個(gè)可以自動(dòng)分析項(xiàng)目的文件結(jié)構(gòu)谒主，尋找javascript的module朝扼，和其他的資源比如css赃阀，圖片等等，來打包供給瀏覽器使用擎颖。
webpack grunt gulp 之間的比較
webpack不同于grunt gulp等任務(wù)執(zhí)行工具和打包工具榛斯，它本身嚴(yán)格來說并不是一個(gè)打包工具，它依賴很多l(xiāng)oader和plugins搂捧，后面會(huì)講到驮俗。
像grunt和gulp來實(shí)現(xiàn)打包，它是按配置的要求尋找相應(yīng)的文件允跑，然后編譯和打包王凑。 下面這個(gè)圖展示了gulp或者grunt的打包過程搪柑。
而webpack卻是整體的分析這個(gè)項(xiàng)目，獲得整體的依賴關(guān)系索烹，然后根據(jù)不同的資源采用相應(yīng)的loader來進(jìn)行編譯和打包工碾。
