這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。
前沿：webpack-dev-server支持熱更新，簡單的說就是你修改代碼，瀏覽器能夠自動刷新頁面。因爲很久沒有配置過webpack-dev-server，搭建出效果後，我一直以爲是錯的，因爲在我的理解上，我以爲的熱更新並非是刷新頁面，而是更新改動的模塊。要實現非刷新頁面的熱更新，還需要有額外的邏輯。
先看一段代碼截圖
webpack-dev-server的配置。
- historyApiFallback設置爲true,有點類似於app.get("*", index)，就是一個兜底的路由，保證所有未攔截的404頁面都轉向index。
- contentBase 設置的就是dist目錄，即webpack打包的dist目錄，所以開啓webpack-dev-server之前，必須打包一下，不然找不到index.html文件。
- hot設置爲true，表示啓用熱更新，因爲我們用的是API方式允許webpack-dev-server，所以配置項目中必須設置port和host，否則會報錯。
重點：基本配置完成後，在增加一段代碼到webpack的entry裏面
因爲我們走的是API，而webpackDevServer裏面已經提供了以方法addDevServerEntrypoints實現。只需要傳遞兩個配置參數即可。他的效果如圖，我打印出了webpackConfig
說白了就是手動把熱更新的兩個JS文件插入到了entry中，一併打包。如果我們手動寫的webpack.config.js，就應該明白這點。所以這個API還是很方便的。
其實走到這裏就能實現頁面自動刷了。but...
根據配置經驗，還需要配置一個
plugins.push(new webpack.HotModuleReplacementPlugin());but，根據我實際的測試結果，不用手動加入這個plugin也可以實現熱更新。原因就跟我上面說的一樣，API自動加上了這個配置。我們公司的腳手架沒用這個API結果，導致自己額外增添了很多配置。
BUT，走到這裏，我們會發現只實現了第一步頁面自動刷新。如果我們開發的是react應用就遠遠不夠了。因爲一旦項目大起來，刷新頁面將會是一件非常非常耗時的事情，尤其是當涉及到服務器端渲染的時候。
要實現類似於懶更新的功能，需要引入react-hot-loader。引入最新版本，根據文檔，只需要配置兩個地方即可。
腳手架的babel配置，增加一個plugin react-hot-loader/babel
然後在我們的項目目錄中cli-view 中包裹一層Root.jsx
至此就能完美的實現開發環境的自動的更新了，更改代碼，能夠實現刷新當前更改的module，而不是刷新整個頁面。
其實還有一個小小的疑問，在測試過程中，我即便不加上 react-hot-loader/babel這個plugin，也能夠實現懶更新，只需要在項目目錄中配置即可。看了下這個plugin的源碼，沒看出所以然來，我猜測這個plugin,是不是說懶啓動的時候，保證能走一遍babel編譯？ 有待大佬驗證！！！。
順便簡單說下proxy，一般而言調用後臺接口都會報跨域，但設置了proxy，類似於在node層做了一次服務轉發。
我把原本cli-view目錄下的webpack.config.js改成了app.config.js。我把所有的配置都放在了這個文件裏面。我本地啓用了一個端口8888的服務，而我的cli-view的port是3000，當我請求API後，所有的/api前綴的請求都轉到了8888下。
到了這裏關於webpack-dev-server的內容就差不多了。很細，很有意思