話(huà)說(shuō)前頭

  • webpack前段時(shí)間有聽(tīng)說(shuō)一下，現(xiàn)在已經(jīng)到了3.x的版本，自己沒(méi)去接觸。因?yàn)橹笆褂胓ulp來(lái)作為自己的項(xiàng)目構(gòu)建工具?，F(xiàn)在感覺(jué)gulp使用的趨勢(shì)在減少?，F(xiàn)在這段時(shí)間去接觸了webpack，感覺(jué)很不錯(cuò)，它的模塊化打包機(jī)制，對(duì)前端開(kāi)發(fā)和性能方面都帶來(lái)好處。這里不是說(shuō)gulp不好，兩者不作比較

  • 接下來(lái)會(huì)說(shuō)說(shuō)自己對(duì)webpack使用的感受，我不會(huì)一步步寫(xiě)出使用webpack的流程，因?yàn)殛P(guān)于webpack的教程有很多，但會(huì)寫(xiě)一些關(guān)鍵地方，注意地方，來(lái)加深對(duì)webpack的見(jiàn)解。

  • 學(xué)習(xí)就是這樣，東看看西看看，看人家的對(duì)某件東西的見(jiàn)解，加上自己的理解，是否異同，慢慢積累，最終成為自己的知識(shí)。

webpack介紹

1.（引用了webpack官網(wǎng)的一句話(huà)）：

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個(gè)，由瀏覽器加載。
它是高度可配置的，但是，在開(kāi)始前你需要先理解四個(gè)核心概念：入口(entry)、輸出(output)、loader、插件(plugins)。

2.個(gè)人理解：

這里說(shuō)了這么多就是它能把項(xiàng)目中資源文件看成一個(gè)個(gè)模塊，然后將他們打包成少量或一個(gè)文件，然后我們?nèi)ヒ眠@文件。

3.疑惑：

大家這里可能會(huì)疑惑，當(dāng)時(shí)我也想，怎么能做到這個(gè)？怎么就打包成一個(gè)文件了？那么js，css，圖片什么的怎么搞？還有這種操作？我能怎么辦，那只能選擇相信它。

4.感受：

其實(shí)學(xué)習(xí)某一樣工具，我們只需要知道這東西能做什么，然后怎么用它，但它具體實(shí)現(xiàn)的細(xì)節(jié)，有時(shí)我們不必深究。我們只需知其然，不必知其所以然。盡管去用這個(gè)東西，它本來(lái)就是一個(gè)工具。就好比開(kāi)一輛車(chē)，我們只需去學(xué)習(xí)怎么開(kāi)，而不用太在意他為什么能開(kāi)，開(kāi)多了一樣成為老司機(jī)，不是嗎，沒(méi)毛病吧。工具它能給我們帶來(lái)便利，就足夠了。除非你是制造工具的。但是如果對(duì)webpack非常感興趣，可以去它的github上看看。

webpack能做的事：

上面說(shuō)webpack能打包模塊，其實(shí)還有很多功能。