有人会问 webpack-dev-server 已经是热加载了，能做到只要代码修改了页面也自动更新了，为什么在 react 项目还要安装 react-hot-loader 呢？其实这两者的更新是有区别的，

• webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。
• 而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。
  react-hot-loader需要依赖 webpack 的 HotModuleReplacement 热加载插件。

下面来说说怎么来配置 react-hot-loader 。

步骤1：

安装 react-hot-loader

npm install --save-dev react-hot-loader

步骤2：

在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在 babel-polyfill 的后面。

entry: [
        'babel-polyfill', 
        'react-hot-loader/patch', //设置这里
        __dirname + '/app/main.js'
]

步骤3：

在 webpack.config.js 中设置 devServer 的 hot 为 true

devServer: {
        contentBase: path.join(__dirname, './dist'),
        historyApiFallback: true,
        host: '127.0.0.1',
        open: true,
        hot: true,  // 这里
        // proxy: [{
        //   context: ['/bankPoint'],
        //   target: '',
        //   changeOrigin: true
        // }]
    },

步骤4：

在 .babelrc 里添加 plugin

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "react-hot-loader/babel", // here
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    "transform-class-properties",
    [
      "import", {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

步骤5：

在 webpack.config.js 的 plugins 里添加依赖的 HotModuleReplacement 插件

plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]

步骤6：

最后这个操作就是在页面的主入口文件，比如我的是 main.js 添加些代码

// import "babel-polyfill"
import React from 'react'
import {render} from 'react-dom'
import {AppContainer} from 'react-hot-loader'


import App from './App'

const renderRoot = Component =>
    render(
        <AppContainer>
            <Component />
        </AppContainer>,
        document.getElementById('root')
    )

renderRoot(App)
if (module.hot) module.hot.accept('./App', () => renderRoot(App))