webpack-dev-server是一個小型的node.js Express伺服器,它使用webpack-dev-middleware中介軟體來為通過webpack打包生成的資原始檔提供Web服務。它還有一個通過Socket.IO連線著webpack-dev-server伺服器的小型執行時程式。webpack-dev-server傳送關於編譯狀態的訊息到客戶端，客戶端根據訊息作出響應。

簡單來說，webpack-dev-server就是一個小型的靜態檔案伺服器。使用它，可以為webpack打包生成的資原始檔提供Web服務。那麼，它能給開發帶來什麼便利呢？

第一 webpack-dev-server有兩種模式支援自動重新整理——iframe模式和inline模式。在iframe模式下：頁面是巢狀在一個iframe下的，在程式碼發生改動的時候，這個iframe會重新載入；在inline模式下：一個小型的webpack-dev-server客戶端會作為入口檔案打包，這個客戶端會在後端程式碼改變的時候重新整理頁面。

• 使用inline模式有兩種方式：命令列方式和Node.js API。
  1) 命令列方式比較簡單，只需加入--line選項即可。例如：
  webpack-dev-server --inline
  使用--inline選項會自動把webpack-dev-server客戶端加到webpack的入口檔案配置中。
  注意：使用webpack-dev-server命令列的時候，會自動查詢名為webpack.config.js的配置檔案。如果你的配置檔名稱不是webpack.config.js，需要在命令列中指明配置檔案。例如，我的配置檔案是webpack.config.dev.js：webpack-dev-server --inline --config webpack.config.dev.js
  。
  2) Node.js API方式需要手動把webpack-dev-server/client?http://localhost:8080加到配置檔案的入口檔案配置處，因為webpack-dev-server沒有inline:true這個配置項。

第二 webpac-dev-server支援Hot Module Replacement，即模組熱替換，在前端程式碼變動的時候無需整個重新整理頁面，只把變化的部分替換掉。使用HMR功能也有兩種方式：命令列方式和Node.js API。

• 命令列方式同樣比較簡單，只需加入--line --hot選項。--hot這個選項幹了一件事情，它把webpack/hot/dev-server

  入口點加入到了webpack配置檔案中。這時訪問瀏覽器，你會看見控制檯的log資訊：

  [HMR] Waiting for update signal from WDS...
  [WDS] Hot Module Replacement enabled.

  HMR字首的資訊由webpack/hot/dev-server模組產生，WDS字首的資訊由webpack-dev-server客戶端產生。

• Node.js API方式需要做三個配置：
  1) 把webpack/hot/dev-server加入到webpack配置檔案的entry項；
  2) 把new webpack.HotModuleReplacementPlugin()加入到webpack配置檔案的plugins項；
  3) 把hot:true加入到webpack-dev-server的配置項裡面。

注意：要使HMR功能生效，還需要做一件事情，就是要在應用熱替換的模組或者根模組裡面加入允許熱替換的程式碼。否則，熱替換不會生效，還是會重刷整個頁面。下面是摘自webpack在github上docs的原話：

A module can only be updated if you "accept" it. So you need to module.hot.accept the module in the parents or the parents of the parents... I. e. a Router is a good place or a subview.

具體的程式碼是：

if(module.hot)
    module.hot.accept();

也可以使用一些外掛去完成這個工作，例如webpack-module-hot-accept外掛。不過，webpack-dev-server HMR結合react-hot-loader使用的時候，react-hot-loader會去做這個工作。

綜合上述兩點，使用wepack-dev-server輔助開發，使得開發者在開發前端程式碼的過程中無需頻繁手動重新整理頁面，使用HMR甚至不用等待頁面重新整理，確實可以給開發者帶來很好的體驗。

但是，問題又來了。我要進行前後端聯調的時候怎麼辦呢？畢竟webpack-dev-server只是一個靜態檔案伺服器，不具備動態處理的能力。這個時候就需要將後端伺服器與webpack-dev-server結合使用了。webpack-dev-server只用來為webpack打包生成的資原始檔提供服務，比如js檔案、圖片檔案、css檔案等；後端伺服器除提供API介面外，還提供入口HTML。

要將webpack-dev-server與後端伺服器結合使用，需要做三件事情。
第一 首頁HTML檔案是從後端伺服器發出的，這時頁面的根地址變成了後端伺服器地址，怎麼使得webpack產生的資原始檔在請求資源的時候是向web-dev-server請求而不是後端伺服器請求？只需在webpack配置檔案中的output.publicPath配置項寫上絕對URL地址，例如output.publicPath = "http://localhost:8080/assets/"。這時，webpack打包產生的資原始檔裡面的url地址都會是絕對地址，而不是相對地址。
第二 後端伺服器產生的入口HTML檔案要向webpack-dev-server請求資原始檔，這個簡單，只需在HTML檔案中加入資原始檔的絕對地址，例如：<script src="http://localhost:8080/assets/bundle.js">
第三 要使webpack-dev-server和它的執行時程式連線起來。這個簡單，只需要使用iline模式即可。

OK，things done!

最後再插一句，我在將HMR和react-hot-loader結合使用的時候遇到了熱替換不起作用的問題，即改變前端程式碼之後頁面不是熱替換而是沖刷。我在這裡找到了答案。
react-hot-loader/docs/troubleshooting.md