從零開始開發一個react腳手架（四）

這一篇可能主要講的是熱更新，寫的很細，遇到不少有意思的地方，一一和你們講解下。

---

前沿：webpack-dev-server支持熱更新，簡單的說就是你修改代碼，瀏覽器可以自動刷新頁面。

先看一段代碼截圖

webpack-dev-server的配置。

• historyApiFallback設置爲true,有點相似於app.get("*", index)，就是一個兜底的路由，保證全部未攔截的404頁面都轉向index。
• contentBase 設置的就是dist目錄，即webpack打包的dist目錄，因此開啓webpack-dev-server以前，必須打包一下，否則找不到index.html文件。

• inline設置爲true,更新文件後刷新頁面

  • 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的內容就差很少了。很細，頗有意思

從零開始開發一個react腳手架（五）