react.js - express + webpack + react-hot-loader@3.0.0-beta.6热更新问题

问题描述

问 题

代码量有点大,截取部分提问

服务端app.js添加代码如下

if (__DEBUG__) {
    //热更新
    const webpack = require('webpack');
    const webpackConfig = require('./../webpack.config.babel').default;
    const compiler = webpack(webpackConfig);
    app.use(require('webpack-dev-middleware')(compiler, {
        hot: true,
        stats: {
            colors: true
        }
    }));
    app.use(require('webpack-hot-middleware')(compiler));
}

webpack.config.babel.js下的entry

{[
    //资源服务器地址
    'webpack-hot-middleware/client?reload=true',
    'react-hot-loader/patch',
    'webpack/hot/only-dev-server',
    './../index'
]}

webpack.config.babel.js下的plugin包含

new webpack.HotModuleReplacementPlugin()

devtool = '#source-map'

app.jsx

if (module.hot) {
        module.hot.accept('./components/index', () => {
            require('./components/index');
            ReactDOM.render(
                <Index data={initialState}/>,
                document.getElementById('react-html-container')
            );
        });
    }

index.jsx下有lantern.jsx,修改'点击登录'为'点击登录xxx'

<button className="get" onClick={() => this.gotoLogin()}>
    点击登录xxx
</button>

控制台提示正常

但是页面按钮文案未修改

解决方案

app.jsx
添加react-hot-loader

import {
    AppContainer
} from 'react-hot-loader';

修改render

ReactDOM.render(
                <AppContainer>
                    <Index data={initialState}/>
                </AppContainer>,
                document.getElementById('react-html-container')
            );

这篇关于react.js - express + webpack + react-hot-loader@3.0.0-beta.6热更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！