webpack非常的強大，合理的腳手架可以爲我們的工作省去衆多繁瑣無意義的工作。其中熱刷新、熱加載相較於傳統開發大大提高了開發節奏。
從腳手架發現熱刷新、熱加載的差異
相信大部分的vue開發者都是從vue-cli開始的，很多初學者歡快的跑着vue項目卻不敢改隨意改變vue-cli的配置（畢竟webpack確實很複雜，vue-cli也做了很多工作來優化初學者的體驗）。
相比之下react沒有提供一個比較健壯的腳手架了(至少沒有明顯地被我找到，望賜教)。據我知一個是yeoman的 generator-react-webpack、react的create-react-app，還有一個不錯的react-starter-kit(熱加載，而且集成了非常多代碼，參考性很高)。
簡單的區分熱加載與熱刷新:
熱刷新：文件內動改動後，整個頁面刷新，不保留任何狀態（比如輸入過內容的Input表單），相當於webpack幫你摁了F5刷新(歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860) 熱加載：文件改動後，以最小的代價改變被改變的區域。儘可能保留改動文件前的狀態（對input輸入內容後，修改其他標籤的代碼）
這在雖然兩者相較於傳統開發（手動F5）都提升了開發體驗，但兩者之間的依舊很大，尤其是當項目變得愈發複雜之後，我們必須一勞永逸的解決這個問題（留出更多的時間來開發bug）。
動手修改
從頭配置就是另一個領域了，所以我們直接從vue-cli開始改動。
下述步驟僅列出關鍵做啓發參考，詳細請參考最後github完整項目
- 刪除vue相關的依賴、文件等；整個scr內的東西都可以刪掉
- package.json依賴加入babel-loader webpack-dev-server react-hot-loader(最關鍵)
- package.json命令行設置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
- webpack.base.conf 添加.jsx文件需要經過babel-loader處理，配置options:{plugins:['react-hot-loader/babel']}
- .babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
- src文件夾下創建main.js（起名要跟webpack配置的入口文件一致）
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import App from './pages/App';
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
export default hot(module)(App); // 熱加載的關鍵
至此，我們就可以愉快地使用react體驗熱加載的快♂感了~ 問題所在 其實在簡單地修改vue-cli中的main.js文件爲react相關代碼（別忘了配置babel處理jsx）並依舊是熱刷新。 經過本地代碼觀察對比後，發現了一個吸引人的名字： 在webpack.dev.conf文件中：
new webpack.HotModuleReplacementPlugin()
網上查詢後得知這是實現熱加載的關鍵，它需要代碼本身具備模塊化的性質（這意味着只要像三大框架這樣可編寫可複用組件的框架都能利用這個性質），這樣纔可以通過插♂拔代碼實現熱加載。(歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860) 而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老實實熱刷新了。 在這種情況下react-hot-loader呼之欲出。配合官方的使用方法，就能繼續使用熱加載了。
結語
感謝您的觀看，如有不足之處，歡迎批評指正。