基於webpack的前端工程化開發解決方案探索（三）：webpack-dev-server

大魔王薩格拉斯發表於2015-12-07
Web前端devServer

　　

　　前兩篇中我們使用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，希望能將前端開發人員從這些重複性的打包構建的工作中解放出來，將時間與精力投放在實際的業務程式碼開發上去。

 

 

　　

相關文章