資訊專欄INFORMATION COLUMN
摘要：根據配置經驗，還需要配置一個，根據我實際的測試結果，不用手動加入這個也可以實現熱更新。我們公司的腳手架沒用這個結果，導致自己額外增添了很多配置。，走到這里，我們會發現只實現了第一步頁面自動刷新。很細，很有意思從零開始開發一個腳手架五
這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。
前沿：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腳手架（五）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103499.html
摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四 前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word 開始之前再說一下墊片和presets。 前幾天突發疑問，create-react-app是怎么做的墊片，...
摘要：關于和，其實單純問兩者的區別，大家都知道，一個是開發依賴，一個是線上依賴。因為一開始的開發不規范，導致我隨意亂裝。。一個包可以再大點。腳手架已經實現了三分之一，現在是直接來作為腳手架，到最后效果應該是的形式，不過命令內容已經實現和。 前言：最近天天加班做新項目，Taro版的小程序，還要實現富文本加海報，踩了不少坑，下次專門開個坑說一下。 回到腳手架，說實話從頭寫一個，即便是參考crea...
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三 上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：第一步創建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發腳手架啊，這一步可以放到最后來弄，先把打包構建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
閱讀 1158·2023-04-26 01:35
閱讀 2513·2021-11-02 14:44
閱讀 7643·2021-09-22 15:38
閱讀 2205·2021-09-06 15:11
閱讀 3720·2019-08-30 15:53
閱讀 795·2019-08-29 16:54
閱讀 631·2019-08-26 13:48
閱讀 1763·2019-08-26 13:47
