在學前端的過程中纪铺，一直對文件的引入有疑問，感覺如果只是把<script>轨淌、<style>堆疊在一起的話很混亂，盡管可以寫注釋，但引入文件一多還是容易傻傻分不清震束。
后來逐漸了解到前端要想應用化，那么各種資源的加載就會變得復雜当犯，這時就需要模塊化垢村。
查看一番后，了解到主要有CommonJS這種同步模塊化規(guī)范和AMD這種異步模塊化規(guī)范嚎卫。前者多用于服務端嘉栓，后者則是客戶端，只不過不是絕對的拓诸，CommonJS也有面對客戶端的實現Browserify侵佃，AMD也有面向服務端的實現RequireJS（同時也用于客戶端）。還有CMD奠支，UMD馋辈，ES6模塊，這里不深入展開倍谜。
那么大概就是這么一個情況迈螟。之后又知道了webpack，到處都能看到對它的介紹尔崔，最近開始著手學習答毫，偶遇了一個簡潔，精煉的webpack教程（Webpack 中文指南）您旁。
教程開頭簡單回顧了一下前端模塊化過程后烙常，提到了期望的模塊系統(tǒng)是什么樣子：
可以兼容多種模塊風格，盡量可以利用已有的代碼，不僅僅只是 JavaScript 模塊化蚕脏，還有 CSS侦副、圖片、字體等資源也需要模塊化驼鞭。
之后就開始提及webpack是如何滿足了這些期望秦驯，更多細節(jié)教程里可見。
簡單跟著教程里的最簡項目使用了一下webpack后挣棕，我理解的模塊結構大致如下（沒研究過原理译隘，教程也沒講，所以很可能是錯的）：
最上面的bundle.js文件是最終所有模塊被編譯后的匯總模塊洛心，而entry.js則類似html文件里的index.html文件固耘，是一個初始文件，或者說主頁面文件词身，其他的功能模塊厅目，比如圖里最下面的module1，module2法严，module3 损敷，都在entry.js里用require引入。至于entry.js和bundle.js的關系則是在一個webpack.config.json文件里設置深啤。
至于還有一個loader拗馒，也就是加載器或者叫資源轉換器則不贅述，參考教程就行溯街，不過這個教程也只是大概介紹并演示一遍使用诱桂。
然后，驚喜的來了苫幢，webpack的一個功能點使我真正產生了寫這篇記錄的沖動访诱。到不是這個功能讓我完整的領會了webpack，其實就只是一個小功能——觀察者模式韩肝，它讓我體會到了實實在在的效率提升触菜。這個模式可以根據你的代碼改動，實時刷新網頁上的變動哀峻。就這一點就讓我感動了涡相。
具體實現就是一行命令。在前面配置好項目結構剩蟀，寫好配置文件后催蝗，執(zhí)行以下命令即可：
當然，使用 webpack-dev-server開發(fā)服務是一個更好的選擇育特。
它將在 localhost:8080 啟動一個 express 靜態(tài)資源 web 服務器丙号，并且會以監(jiān)聽模式自動運行 webpack先朦。
在瀏覽器打開 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯后的資源輸出，
并且通過一個 socket.io 服務實時監(jiān)聽它們的變化并自動刷新頁面犬缨。
安裝
$ npm install webpack-dev-server -g
運行
$ webpack-dev-server --progress --colors
其實就是開了個本地服務器喳魏，然后監(jiān)控項目文件的變化，實時編譯怀薛。但功能雖簡單刺彩，實際使用時的效率提升真不是一點半點，絕對可以說是數量級的提升枝恋。
比如在打開這個模式之后创倔，再在瀏覽器那輸入localhost:8080：
然后我只在一個css模塊文件里改動這個背景顏色，從yellow變?yōu)閎lue焚碌。
剛在編輯器按下保存快捷鍵command+s畦攘，網頁也立刻被渲染成了藍色背景：
不多說了，總之這功能就是很爽……
最后呐能，接下來要做的則是參考更多的教程文章念搬，更好的使用webpack。
比如參考簡書的這篇：入門Webpack摆出，看這篇就夠了
對上面這篇的補充：補充
再記錄一張webpack運行流程圖：
