資訊專欄INFORMATION COLUMN
摘要：根據(jù)配置經(jīng)驗，還需要配置一個，根據(jù)我實際的測試結(jié)果，不用手動加入這個也可以實現(xiàn)熱更新。我們公司的腳手架沒用這個結(jié)果，導(dǎo)致自己額外增添了很多配置。，走到這里，我們會發(fā)現(xiàn)只實現(xiàn)了第一步頁面自動刷新。很細，很有意思從零開始開發(fā)一個腳手架五
這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。
前沿：webpack-dev-server支持熱更新，簡單的說就是你修改代碼，瀏覽器能夠自動刷新頁面。
先看一段代碼截圖
webpack-dev-server的配置。
historyApiFallback設(shè)置為true,有點類似于app.get("*", index)，就是一個兜底的路由，保證所有未攔截的404頁面都轉(zhuǎn)向index。
contentBase 設(shè)置的就是dist目錄，即webpack打包的dist目錄，所以開啟webpack-dev-server之前，必須打包一下，不然找不到index.html文件。
inline設(shè)置為true,更新文件后刷新頁面
hot設(shè)置為true，只更新改動模塊，因為我們用的是API方式允許webpack-dev-server，所以配置項目中必須設(shè)置port和host，否則會報錯。
重點：基本配置完成后，在增加一段代碼到webpack的entry里面
因為我們走的是API，而webpackDevServer里面已經(jīng)提供了以方法addDevServerEntrypoints實現(xiàn)。只需要傳遞兩個配置參數(shù)即可。他的效果如圖，我打印出了webpackConfig
說白了就是手動把熱更新的兩個JS文件插入到了entry中，一并打包。如果我們手動寫的webpack.config.js，就應(yīng)該明白這點。所以這個API還是很方便的。
其實走到這里就能實現(xiàn)頁面自動刷了。but...
根據(jù)配置經(jīng)驗，還需要配置一個
plugins.push(new webpack.HotModuleReplacementPlugin());
but，根據(jù)我實際的測試結(jié)果，不用手動加入這個plugin也可以實現(xiàn)熱更新。原因就跟我上面說的一樣，API自動加上了這個配置。我們公司的腳手架沒用這個API結(jié)果，導(dǎo)致自己額外增添了很多配置。
BUT，走到這里，我們會發(fā)現(xiàn)只實現(xiàn)了第一步頁面自動刷新。如果我們開發(fā)的是react應(yīng)用就遠遠不夠了。因為一旦項目大起來，刷新頁面將會是一件非常非常耗時的事情，尤其是當(dāng)涉及到服務(wù)器端渲染的時候。
要實現(xiàn)類似于懶更新的功能，需要引入react-hot-loader。引入最新版本，根據(jù)文檔，只需要配置兩個地方即可。
腳手架的babel配置，增加一個plugin react-hot-loader/babel
然后在我們的項目目錄中cli-view 中包裹一層Root.jsx
至此就能完美的實現(xiàn)開發(fā)環(huán)境的自動的更新了，更改代碼，能夠?qū)崿F(xiàn)刷新當(dāng)前更改的module，而不是刷新整個頁面。
其實還有一個小小的疑問，在測試過程中，我即便不加上 react-hot-loader/babel這個plugin，也能夠?qū)崿F(xiàn)懶更新，只需要在項目目錄中配置即可?？戳讼逻@個plugin的源碼，沒看出所以然來，我猜測這個plugin,是不是說懶啟動的時候，保證能走一遍babel編譯？ 有待大佬驗證?。?！。
順便簡單說下proxy，一般而言調(diào)用后臺接口都會報跨域，但設(shè)置了proxy，類似于在node層做了一次服務(wù)轉(zhuǎn)發(fā)。
我把原本cli-view目錄下的webpack.config.js改成了app.config.js。我把所有的配置都放在了這個文件里面。我本地啟用了一個端口8888的服務(wù)，而我的cli-view的port是3000，當(dāng)我請求API后，所有的/api前綴的請求都轉(zhuǎn)到了8888下。
到了這里關(guān)于webpack-dev-server的內(nèi)容就差不多了。很細，很有意思
從零開始開發(fā)一個react腳手架（五）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103499.html
摘要：前面兩篇文都只是鋪墊，今天至少要實現(xiàn)一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當(dāng)然以后會拆出來，作為目錄下的一個執(zhí)行文件。里面就配置了一個。下一篇從零開始開發(fā)一個腳手架四 前面兩篇文都只是鋪墊，今天至少要實現(xiàn)一個簡單react的hello word 開始之前再說一下墊片和presets。 前幾天突發(fā)疑問，create-react-app是怎么做的墊片，...
摘要：關(guān)于和，其實單純問兩者的區(qū)別，大家都知道，一個是開發(fā)依賴，一個是線上依賴。因為一開始的開發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。一個包可以再大點。腳手架已經(jīng)實現(xiàn)了三分之一，現(xiàn)在是直接來作為腳手架，到最后效果應(yīng)該是的形式，不過命令內(nèi)容已經(jīng)實現(xiàn)和。 前言：最近天天加班做新項目，Taro版的小程序，還要實現(xiàn)富文本加海報，踩了不少坑，下次專門開個坑說一下。 回到腳手架，說實話從頭寫一個，即便是參考crea...
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復(fù)用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西從零開始開發(fā)一個腳手架三 上一篇已經(jīng)初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過N多源碼的經(jīng)驗總結(jié)，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：第一步創(chuàng)建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發(fā)腳手架啊，這一步可以放到最后來弄，先把打包構(gòu)建的步驟弄好。 前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。閱讀了next腳手架和create-react-app腳手架源碼，...
閱讀 1172·2023-04-26 01:35
閱讀 2566·2021-11-02 14:44
閱讀 7709·2021-09-22 15:38
閱讀 2248·2021-09-06 15:11
閱讀 3740·2019-08-30 15:53
閱讀 843·2019-08-29 16:54
閱讀 670·2019-08-26 13:48
閱讀 1787·2019-08-26 13:47
