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

　　

　　前兩篇中咱們使用webpack完成了靜態資源（css/js/img）等自動寫入HTML模板中，同時還能夠爲靜態資源添加hash版本號，既知足了咱們對於靜態資源的打包要求，同時又無需開發人員介入打包過程，讓咱們的重點集中在業務邏輯的實現上來。可是每次修改完代碼後若是手動執行 webpack 命令才能生效的話，那也夠虐心的，好在的webpack爲咱們提供了一個強力的開發工具：webpack-dev-server！

　　

　　1、代碼壓縮

　　在開始瞭解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主要打包功能）已經基本上配置完成。

 

　　

　　2、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！

　　

　　

　　3、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，但願能將前端開發人員從這些重複性的打包構建的工做中解放出來，將時間與精力投放在實際的業務代碼開發上去。