webpack核心， Hot Module Replacement(热模块替换)

你可以不会。但是不能不学。

参考文章 :
https://www.cnblogs.com/ikcamp/p/8521145.html
https://blog.csdn.net/lunahaijiao/article/details/107421108

HotModuleReplacementPlugin

// index.js

var App = require('./App')
var React = require('react')
var ReactDOM = require('react-dom')

// 像通常一样 render Root Element
var rootEl = document.getElementById('root')
ReactDOM.render(<App />, rootEl)

// 我们是不是在 dev 环境 ？
if (module.hot) {
  // 当 App.js 更新了
  module.hot.accept('./App', function () {
    // require 进来更新的 App.js 重新render
    var NextApp = require('./App')
    ReactDOM.render(<NextApp />, rootEl)
  })
}

但 HMR 到底是什么？我们可以用一句话总结：当一个 import 进来的模块发生了变化，HMR 提供了一个接口让我们使用 callback 回调去做一些事情。

缺点：组件的 state 和 DOM 被销毁。
当我们的 App.js 更新，实际上是有个新的 App.js 用 script 标签注入到 html， 并且重新执行了一次。此时新生成的 component 和之前的是一个组件的不同版本，它们是不同版本的同一个组件，但是 NextApp !== App。

如果你了解 React ，你会知道当下一个 component 的 type 和之前的不一样，它会 unmount 之前那个。这就是为什么 state 和 DOM 会被销毁。

在解决 state 保留的问题上，有人认为如果工程依赖一个单一的 state 树，那没有必要费大精力去保留组件自身的 state。因为在这种类型的 app 里面我们关注的更多的是全局的这个 state 树，而去保存这个全局的 state 树是很容易做到的，比如你可以把它保存到 localstorage里面，当 store 初始化的时候你去读取它，这样的话连刷新都不会丢失状态。

Dan 接受了这个意见，并且在自己的文章里面总结，如果你使用 redux ，并且主要的状态保存在 redux 的 store 上，这时也许你不需要使用 React-Hot-Loader。

react-hot-loader