使用Webpack配置React项目中的热更新

本文基于 create-react-app 脚手架进行配置

首先安装插件 react-hot-loader ,安装方法 npm i --save-dev react-hot-loader

然后在config文件夹下的webpack.config.dev.js文件中，module.exports entry: []，第一行添加以下代码:

// 开启react代码的模块热替换（HMR）
'react-hot-loader/patch',
// 为webpack-dev-server的环境打包好运行代码
// 然后连接到指定服务器域名与端口, 这里的端口为自己项目的端口
'webpack-dev-server/client?http://localhost:3000/',
// 为热替换（HMR）打包好运行代码
// only- 意味着只有成功更新运行代码才会执行热替换（HMR）
'webpack/hot/only-dev-server',

然后在项目入口文件如Router.js或者App.js中添加如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Router from './router';
import store from './store';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';

//热更新实现
const render = Component => {
    ReactDOM.render(
        //绑定redux、热加载
        <Provider store={store}>
            <AppContainer>
                <Component />
            </AppContainer>
        </Provider>,
        document.getElementById('root'),
    )
}

render(Router);

// Webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./router', () => {
        render(Router);
    })
}

registerServiceWorker();

具体项目实现可以参照我的GitHub项目 react-redux-admin , 一个redux的脚手架