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