前兩篇中我們使用webpack完成了靜態資源（css/js/img）等自動寫入HTML模板中，同時還可以為靜態資源添加hash版本號，既滿足了我們對於靜態資源的打包要求，同時又無需開發人員介入打包過程，讓我們的重點集中在業務邏輯的實現上來。但是每次修改完代碼后如果手動執行 webpack 命令才能生效的話，那也夠虐心的，好在的webpack為我們提供了一個強力的開發工具：webpack-dev-server！
一、代碼壓縮
在開始了解webpack-dev-server之前，我們還有一件准備工作需要做，那就是完成對代碼的壓縮混淆，不僅可以保證代碼的安全性，還可以降低資源文件的大小，減少網絡傳輸。
A. 壓縮HTML
1 new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML 2 favicon:'./src/img/favicon.ico', //favicon路徑 3 filename:'/view/index.html', //生成的html存放路徑，相對於 path 4 template:'./src/view/index.html', //html模板路徑 5 inject:true, //允許插件修改哪些內容，包括head與body 6 hash:true, //為靜態資源生成hash值 7 minify:{ //壓縮HTML文件 8 removeComments:true, //移除HTML中的注釋 9 collapseWhitespace:true //刪除空白符與換行符 10 } 11 })
HtmlWebpackPlugin插件在生成HTML調用了 html-minifier 插件來完成對HTML的壓縮，這里我們使用兩個配置完成來移除HTML中的注釋以及空白符達到壓縮的效果，其他的具體的配置參數大家請參考 html-minifier API
B. 壓縮JS與CSS
1 new webpack.optimize.UglifyJsPlugin({ //壓縮代碼 2 compress: { 3 warnings: false 4 }, 5 except: ['$super', '$', 'exports', 'require'] //排除關鍵字 6 }),
webpack已經內嵌了uglifyJS來完成對JS與CSS的壓縮混淆，無需引用額外的插件。
這里需要注意的是壓縮的時候需要排除一些關鍵字，不能混淆，比如$或者require，如果混淆的話就會影響到代碼的正常運行。
修改完 webpack配置后，我們就可以運行webpack命令來重新打包了。
這次可以看到dist下輸出的Js/css/html都是壓縮過的。
參考代碼：https://github.com/xiaoyunchen/webpack/blob/master/webpack.config.js
OK，到目前為止，我們的靜態資源文件已經可以自動生成，壓縮，合並（webpack主要打包功能）已經基本上配置完成。
二、webpack-dev-server
webpack開發服務器，是webpack官方提供的一個輔助開發工具，它可以自動監控項目下的文件，一旦有修改保存操作，開發服務器就會自動運行webpack 打包命令，幫我們自動將開發的代碼重新打包。而且，如果需要的話，還能自動刷新瀏覽器，重新加載資源。
Cool！一般前端開發人員都會有兩台顯示器，一台用於編輯代碼，一台用於打開瀏覽器查看效果。如果配置上webpack-dev-server的話，我們只需要在保存修改后的代碼，什么也不用做，webpack就能自動幫我們打包代碼，同時自動刷新瀏覽器，讓我們立馬看到修改后的效果。
同樣的，我們首先通過npm安裝webpack-dev-server:
npm install webpack-dev-server --save-dev
安裝完成后我們就可以在項目根目錄通過 webpack-dev-server 命令來啟動開發服務器了，當然這其中也有很多配置，具體的API請參考：webpack-dev-server Options
在webpack配置文件中增加開發服務器的配置：
devServer:{ contentBase:'./dist/view' }
這里主要是將其運行目錄設置為打包后的view目錄。
然后我們通過命令來啟動開發服務器：
webpack-dev-server --inline
webpack-dev-server有兩種啟動模式：
iFrame：該模式下修改代碼后會自動打包，但是瀏覽器不會自動刷新
inline：內聯模式，該模式下修改代碼后，webpack將自動打包並且刷新瀏覽器，讓我們看到最終的修改效果
大家可以分別啟動這兩種模式來驗證下不同的效果，一般我們都選擇inline模式。
服務器啟動成功以后，我們只需要在瀏覽器中訪問 http://localhost:8080 即可訪問。
很好！這樣我們就很輕松的實現了一邊修改代碼一邊查看效果的目的。
等等，還沒完。webpack還為我們提供了一種更NX的技術，叫做HMR！
三、Hot Modules Replacemant
HMR，模塊熱部署。
也就是說我們的修改后的代碼不僅可以自動打包，而且瀏覽器不用完全刷新，只需要異步刷新，加載修改后部分代碼即可，加載完成效果會馬上反應在頁面效果上。
是的，很屌的樣子。但是啟動這個模式並不是難事，我們只需要在啟動webpack-dev-server是添加--hot參數即可。
webpack-dev-server --inline --hot
我們啟動HMR后，來看下具體的效果：
首先我們訪問 http://localhost:8080
這是我們之前做的效果，點擊按鈕后，瀏覽器通過異步請求加載了chunk1這個模塊JS以及我們所需要的圖片資源。請注意這里的時間戳和邊框顏色。
然后我們到代碼CSS中去修改邊框顏色，將其修改為藍色：
這時，webpack檢測到文件的修改保存操作，然后自動執行了打包操作。
我們到瀏覽器中去看下效果：
哇哦，邊框顏色改變成了藍色！
1. 時間戳沒變，說明我們的瀏覽器並不是全部刷新。
2. 開發工具中的網絡請求多了兩個請求，一個是向服務器發起詢問，判斷是否有更新內容，二是向服務器獲取更新內容的部分，注意不是全部代碼，只是修改的片段。
這個部分強烈建議大家實際動手操作體驗一下具體的效果。
模塊熱部署的確很好用，能讓我們在即時不刷新瀏覽器的情況下也能看到修改后的頁面效果。
但是這個技術目前只是在試驗階段，可能會存在一些BUG，所以不建議大家在生產環境中使用，在開發環境中體驗一下到是沒啥問題。
另外，值得一說的是，使用HMR以后，會一定程度的增加bundle的文件大小。
下圖是未使用HMR模式時，bundle文件index.js為170kb
使用HMR模式以后，文件增大到177Kb，請注意我這里功能比較簡單，而且對代碼進行了壓縮，所以可能看上去差別不是很大。
小結
通過配置webpack-dev-server，希望能將前端開發人員從這些重復性的打包構建的工作中解放出來，將時間與精力投放在實際的業務代碼開發上去。