4.hot-load-replacement配置（react-hot-loaderV4）

什麼是熱更新

按照前面的配置，更改App.jsx中的內容，保存後，頁面上的內容也會實時的變化，這難道不是熱更行嗎？我剛開始也有這樣的疑問。可是，你要注意，目前更改內容保存後，瀏覽器執行的是刷新操做，至關於F5刷新頁面。而熱更新就像ajax同樣，只會更改修改的那部分，不會引發瀏覽器的刷新。

如何配置熱更新

熱更新主要用到的包時react-hot-loader，課程中用的包版本較低，配置比較麻煩（相對於新版本），我在網上搜了一下react-hot-loader的配置，畫風基本時這樣的。目前react-hot-loader版本爲4.8.2版本，根據官網的介紹，如今react-hot-loader能夠直接看成正常的依賴，能夠不用看成開發依賴。打包時，會自動去掉這個包。根據官網的說明，配置起來也很簡單。

• 配置.babelrc文件

{
  "plugins": ["react-hot-loader/babel"]
}

• 將App.jsx導出的App用hot包裹

import { hot } from 'react-hot-loader'
class App extends React.Component {
  render() {
    return (
      <div>This is app</div>
    )
  }
}
export default hot(App)

同時，client的webpack配置中devServer的hot屬性設置爲true便可
每次啓動時，在瀏覽器的console裏面就會出現 [WDS] Hot Module Replacement enabled. 的提示，表明熱更新成功。

另外，還有一個注意事項。配置熱更新成功後，更改文件內容，在network窗口會發現有新的請求文件，本人瀏覽器窗口會去請求熱更新的文件，請求地址以下

http://localhost:8888/publica31180d047a509a4bdc0.hot-update.json

public後面缺乏'/'，奇怪的是並無報404的錯誤，仍是能夠請求獲得。可是最好仍是處理一下，將webpack配置中的publicPath屬性值改成'/public/'，以避免之後出現問題。

相關代碼位於倉庫的2-7分支