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

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

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

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

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

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

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

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

.babelrc文件

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

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

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

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

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

之后修改下webpack配置

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

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

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

刷新后：

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

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

之后編寫webpack配置

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

隨后我們?nèi)我飧膭游覀兊?b>index.jsx代碼他都會自動刷新頁面

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

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

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

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

但是我們返回窗口查看的時候發(fā)現(xiàn)頁面一片空白并且報了個錯

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

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

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

安裝所需插件

然后我們再修改webpack配置

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

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

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

以上的配置在開發(fā)中是沒問題的，但是開發(fā)完成后直接執(zhí)行webpack指令打包成獨立文件的時候還是有點小問題。

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

此時再去dist目錄下直接打開我們的index.html就ok了