摘要：有沒有辦法實現就局部刷新呢當然是有第十步執行為了實現局部熱加載，我們需要添加插件。

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

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

例如：我在桌面上創建了react-test文件夾

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

既然是要構建的react項目那就肯定要下載react的依賴啦

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

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

.babelrc文件

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

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

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

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

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

之后修改下webpack配置

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

然后我們進到我們的dist目錄查看代碼可以發現一樣可以訪問

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

刷新后：

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

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

之后編寫webpack配置

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

隨后我們任意改動我們的index.jsx代碼他都會自動刷新頁面

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

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

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

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

但是我們返回窗口查看的時候發現頁面一片空白并且報了個錯

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

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

之后我們打開服務只需要執行npm run dev，node會幫我們執行｀webpack-dev-server --hot｀指令
好了，到達這一步我們的環境搭建已經進入尾聲了，我們已經完成了react項目的局部熱加載功能。
但是....為了讓我們開發更加方便一點我們還需要借助種種loader
這里舉個? 我們如果需要編譯sass文件

安裝所需插件

然后我們再修改webpack配置

最后再執行我們的npm run dev命令就可以愉快的開發啦～～

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

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

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

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

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