webpack中的熱刷新與熱加載

webpack很是的強大，合理的腳手架能夠爲咱們的工做省去衆多繁瑣無心義的工做。其中熱刷新、熱加載相較於傳統開發大大提升了開發節奏。

從腳手架發現熱刷新、熱加載的差別

相信大部分的vue開發者都是從vue-cli開始的，不少初學者歡快的跑着vue項目卻不敢改隨意改變vue-cli的配置（畢竟webpack確實很複雜，vue-cli也作了不少工做來優化初學者的體驗）。

相比之下react沒有提供一個比較健壯的腳手架了(至少沒有明顯地被我找到，望賜教)。據我知一個是yeoman的 generator-react-webpack、react的create-react-app，還有一個不錯的react-starter-kit (熱加載，並且集成了很是多代碼，參考性很高)。

在學習react時我就發現了上文提到的react前兩個腳手架提供的是熱刷新而非熱加載。

簡單的區分熱加載與熱刷新:

• 熱刷新：文件內動改動後，整個頁面刷新，不保留任何狀態（好比輸入過內容的Input表單），至關於webpack幫你摁了F5刷新
• 熱加載：文件改動後，以最小的代價改變被改變的區域。儘量保留改動文件前的狀態（對input輸入內容後，修改其餘標籤的代碼）

這在雖然二者相較於傳統開發（手動F5）都提高了開發體驗，但二者之間的依舊很大，尤爲是當項目變得愈發複雜以後，咱們必須一勞永逸的解決這個問題（留出更多的時間來開發bug）。

動手修改

從頭配置就是另外一個領域了，因此咱們直接從vue-cli開始改動。

下述步驟僅列出關鍵作啓發參考，詳細請參考最後github完整項目

1. 刪除vue相關的依賴、文件等；整個scr內的東西均可以刪掉
2. package.json依賴加入babel-loader webpack-dev-server react-hot-loader(最關鍵)
3. package.json命令行設置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
4. webpack.base.conf 添加.jsx文件須要通過babel-loader處理，配置options:{plugins:['react-hot-loader/babel']}
5. .babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
6. 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()
複製代碼

網上查詢後得知這是實現熱加載的關鍵，它須要代碼自己具有模塊化的性質（這意味着只要像三大框架這樣可編寫可複用組件的框架都能利用這個性質），這樣才能夠經過插♂拔代碼實現熱加載。 而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老實實熱刷新了。 在這種狀況下react-hot-loader呼之欲出。配合官方的使用方法，就能繼續使用熱加載了。

ps: 僅作參考，react的不少代碼我也處於探索與學習中 配置好的項目地址：gayhub