webpack配置react-hot-loader热加载局部更新

csdn的收藏有点鸡肋，只好以博客的形式记录下来。
原文地址：https://blog.csdn.net/huangpb123/article/details/78556652

我们知道webpack-dev-server已经是热加载了，能够做到只要代码修改了页面就自动更新，那么为什么在react项目中还要安装react-hot-loader呢？两者有什么区别呢？webpack-dev-server的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面；热react-hot-loader不会刷新整个页面，它只会替换修改了的代码，做到页面的局部刷新。react-hot-loader需要依赖webpack的hotModuleReplacementPlugin热加载插件。

react-hot-loader配置过程如下：

步骤1:
安装react-hot-loader：cnpm i react-hot-loader -D

步骤2:
在webpack.config.js的entry中加入react-hot-loader/patch，且一定要写在entry的最前面，如果有babel-polyfill就写在babel-polyfill后面：

entry: {
	app: [
		"react-hot-loader/patch",
		path.join(__dirname, "../client/index.js") // 入口文件
	]
}

步骤3:
在webpack.config.js中设置devServer的hot为true

devServer: {
        host: "0.0.0.0",
        port: "8888",
        contentBase: path.join(__dirname, "../dist"),
        hot: true,
        overlay: {
            errors: true
        },
        publicPath: "/public/",
        historyApiFallback: {
            index: "/public/index.html"
        }
    };

步骤4:
在.babelrc中添加plugin：

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

步骤5:
在webpack.config.js的plugins里添加依赖的hotModuleReplacementPlugin插件：

plugins: [
	new webpack.hotModuleReplacementPlugin(),
	...
]

步骤6:
最后，需要在页面的主入口中添加相关代码，如：

import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader"; // **

import App from "./app.jsx";

const root = document.getElementById("root");
const render = Component => {
    ReactDOM.hydrate(
        <AppContainer>
            <Component />
        </AppContainer>,
        root
    );
}

render(App);

if(module.hot){
    module.hot.accept("./app.jsx", () => {
        const nextApp = require("./app.jsx").default;
        render(nextApp);
    });
}

至此，大功告成！使用4.6.5版本的react-hot-loader测试成功，修改jsx文件后，页面不会再重写刷新，而是直接进行了修改。