摘要：有沒(méi)有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載，我們需要添加插件。

用了3個(gè)多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工，對(duì)于vue的api使用到達(dá)了一定瓶頸，無(wú)奈水平有限，每每深入底層觀賞源碼時(shí)候都迷失了自己。
遂決定再找個(gè)框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對(duì)React、RN技術(shù)垂涎已久,于是決定找找教程來(lái)學(xué)習(xí)。無(wú)奈第一步就卡在了環(huán)境搭建上面，翻閱了各大站點(diǎn)的文章都發(fā)現(xiàn)了一個(gè)共同的問(wèn)題...文章都是16年的，許多用的還是webpack1.x
如今webpack都3.x了，為了不被時(shí)代所淘汰，我們要與時(shí)俱進(jìn)跟上時(shí)代的步伐，使用最新的構(gòu)建方式～

既然說(shuō)了是從零開(kāi)始那我這邊肯定是沒(méi)有什么目錄結(jié)構(gòu)的，不要怕挽起袖子就是干～

例如：我在桌面上創(chuàng)建了react-test文件夾

我這邊就偷懶多打了個(gè)-y快速創(chuàng)建，你也可以執(zhí)行npm init一步步編寫(xiě)package.json配置

既然是要構(gòu)建的react項(xiàng)目那就肯定要下載react的依賴?yán)?/p>

我們還要安裝webpack以及babel插件

安裝了webpack后我們要編寫(xiě)webpack.config.babel.js以及.babelrc文件(或者webpack.config.js多了個(gè)babel是為了讓webpack支持es6語(yǔ)法)

.babelrc文件

執(zhí)行我們的webpack指令,然后我們會(huì)在我們的項(xiàng)目中看到多了個(gè)dist目錄里面包含一個(gè)bundle.js文件

至此，我們的react打包項(xiàng)目已經(jīng)初步完成了，怎么去用呢？
我們需要一個(gè)html頁(yè)面來(lái)展示數(shù)據(jù)。我們可以在項(xiàng)目根目錄下創(chuàng)建一個(gè)index.html，編寫(xiě)以下代碼

然后我們打開(kāi)終端開(kāi)啟http-server服務(wù)，就可以在本地查看我們的項(xiàng)目。當(dāng)然你直接用瀏覽器打開(kāi)這個(gè)文件也是可以的。

但是這樣做有個(gè)問(wèn)題就是，每次我們修改完index.jsx都要執(zhí)行webpack指令重新打包并且index.html還要手動(dòng)給bundle.js添加緩存我們才能看到代碼的變化。有什么辦法可以簡(jiǎn)化這個(gè)流程呢？有，這時(shí)候我們引入html-webpack-plugin插件來(lái)動(dòng)態(tài)生成index.html

接下來(lái)安裝我們的html插件，并且我們先修改一下我們的模版文件

之后修改下webpack配置

此時(shí)再執(zhí)行我們的webpack --watch指令就會(huì)生成這樣一些文件,并且可以實(shí)時(shí)監(jiān)聽(tīng)我們的代碼變化

然后我們進(jìn)到我們的dist目錄查看代碼可以發(fā)現(xiàn)一樣可以訪問(wèn)

之后任意改動(dòng)我們的index.jsx文件他都幫我們實(shí)時(shí)打包好，只需要刷新頁(yè)面就可以看到變化

刷新后：

但是這樣又有問(wèn)題。我們每次都要刷新才能看到變化還是有點(diǎn)麻煩，作為一名合格的程序員，我們應(yīng)該以懶為優(yōu)點(diǎn)，那么有沒(méi)有不需要刷新就可以看到變化的呢？有！

引入我們的webpack-dev-server插件

之后編寫(xiě)webpack配置

然后執(zhí)行我們的webpack-dev-server指令開(kāi)啟服務(wù)，打開(kāi)8091端口即可訪問(wèn)

隨后我們?nèi)我飧膭?dòng)我們的index.jsx代碼他都會(huì)自動(dòng)刷新頁(yè)面

到了這一步基本上已經(jīng)大功告成了，但是還是有個(gè)問(wèn)題。我們每次更新代碼都會(huì)導(dǎo)致整個(gè)頁(yè)面刷新，這樣不僅體驗(yàn)不好而且項(xiàng)目大了之后刷新的成本也很高。有沒(méi)有辦法實(shí)現(xiàn)就局部刷新呢？當(dāng)然是...有！

為了實(shí)現(xiàn)局部熱加載，我們需要添加babel-preset-react-hmre插件。

關(guān)于這個(gè)插件的詳細(xì)說(shuō)明有官方文檔這么權(quán)威的東西就不用我班門(mén)弄斧了～總之他就是一個(gè)可以實(shí)現(xiàn)react局部熱加載的插件
https://github.com/gaearon/re...
怎么用呢？既然他是babel插件那肯定設(shè)置要在.babelrc中設(shè)置,添加以下字段

這些字段什么意思呢，就是在development(開(kāi)發(fā))環(huán)境中引入我們的react局部熱加載插件
然后我們?cè)賵?zhí)行webpack-dev-server開(kāi)啟服務(wù),發(fā)現(xiàn)一切正常

但是我們返回窗口查看的時(shí)候發(fā)現(xiàn)頁(yè)面一片空白并且報(bào)了個(gè)錯(cuò)

這是因?yàn)槲覀冊(cè)陂_(kāi)發(fā)環(huán)境中使用了react-hmre熱加載插件，而webpack-dev-server卻沒(méi)有開(kāi)啟熱加載導(dǎo)致的。我們只需要添加--hot字段就可以解決。
執(zhí)行webpack-dev-server --hot命令，修改我們的index.jsx文件后回到我們的8091端口查看發(fā)現(xiàn)

但是每次開(kāi)啟服務(wù)都要記住這么多指令顯然對(duì)新手來(lái)說(shuō)是不友好的，為了節(jié)省下一個(gè)人的學(xué)習(xí)成本我們可以在package.json定義script腳本

之后我們打開(kāi)服務(wù)只需要執(zhí)行npm run dev，node會(huì)幫我們執(zhí)行｀webpack-dev-server --hot｀指令
好了，到達(dá)這一步我們的環(huán)境搭建已經(jīng)進(jìn)入尾聲了，我們已經(jīng)完成了react項(xiàng)目的局部熱加載功能。
但是....為了讓我們開(kāi)發(fā)更加方便一點(diǎn)我們還需要借助種種loader
這里舉個(gè)? 我們?nèi)绻枰幾gsass文件

安裝所需插件

然后我們?cè)傩薷?b>webpack配置

最后再執(zhí)行我們的npm run dev命令就可以愉快的開(kāi)發(fā)啦～～

關(guān)于文件命名以及路徑配置，大家完全可以在webpack配置中修改，我這里只是舉了個(gè)例子。
還有各種插件的添加以及配置例如postcss url-loader file-loader等等 這些暫時(shí)不屬于react環(huán)境搭建涉及到的，大家按需去官方文檔看看使用說(shuō)明就好～
此外，react官方還提供了一個(gè)腳手架create-react-app(好長(zhǎng)的名字)供大家開(kāi)發(fā)學(xué)習(xí)，https://github.com/facebookin...
我也體驗(yàn)了下還不錯(cuò)，只是我個(gè)人更喜歡自己瞎折騰哈哈
附上我的github項(xiàng)目地址 －－－ https://github.com/HQ-Lin/rea...
項(xiàng)目剛起步慢慢會(huì)給他添磚加瓦 歡迎給個(gè)star鼓勵(lì)下，歇歇～

最后祝大家學(xué)習(xí)愉快～早日升職加薪迎娶白富美走向人生巔峰！

以上的配置在開(kāi)發(fā)中是沒(méi)問(wèn)題的，但是開(kāi)發(fā)完成后直接執(zhí)行webpack指令打包成獨(dú)立文件的時(shí)候還是有點(diǎn)小問(wèn)題。

我們需要在webpack命令之前添加BABEL_ENV="production"設(shè)置babel環(huán)境變量，否則他會(huì)默認(rèn)為development環(huán)境而去使用熱加載插件。

此時(shí)再去dist目錄下直接打開(kāi)我們的index.html就ok了