React热重载在Webpack 4中无法正常工作

Question

React热重载未正常工作。 在webpack入口中，我有以下代码。

entry: {
        home: [
            'webpack-dev-server/client?http://0.0.0.0:8000', 
            'webpack/hot/dev-server', // add "only-dev-server" prevents reload on syntax errors
            path.join(__dirname, 'app/home-styles.js')
        ],
        main: [
            'babel-polyfill',
            path.join(__dirname, 'app/styles.js'),
            path.join(__dirname, 'app/vendor.js'),
            path.join(__dirname, 'app/index.js')
        ]
    },

在dev-server中，我设置了hot=true;

并且我有以下代码来包装热更新Provider：

class Root extends Component {
    render() {
        const { store, history } = this.props;
        return (
            <Provider store={store}>
                <Router history={history} routes={routes(store)}/>
            </Provider>
        );
    }
}

export default hot(module)(Root);

在控制台中显示结果，但当有改变时没有任何反应。因此，基本上看起来像是热重载正在工作，但是没有反映出任何变化。我错过了什么？ 我正在使用react 16.2.*和react-hot-loader @4.0.*以及webpack @4.5.*。

- Uchit Kumar

---

不，我决定暂时忽略它，稍后再看。如果你找到了一个，请评论一下:P 你可以对问题设置赏金，有人会回答的:P - Uchit Kumar

是的，我们正在使用Webpack Dev Server。为什么呢？ - Uchit Kumar

@ClarkT。转换为域名 - Uchit Kumar

刚刚发布了一个答案，抱歉无法通过评论发布代码。 - Clark T.

你尝试过在package.json中使用--hot或者在devServerOptions下设置hot:true吗？就像下面的回答一样。对我来说，重新加载是有效的，但它从不接受被推送的HMR更新，所以总是对我进行完整页面重新加载，但我猜这比什么都没有好一步。 - Jax Cavalera

Answer 1

尝试像这样更新您的开发服务器配置

const devServerOptions = {
    contentBase: './dist',
    hot: true,
    host: 'beta.whenidev.net',
    https: true,
  };
// if you're adding a dev server entry do it like this
  WebpackDevServer.addDevServerEntrypoints(config, devServerOptions);

- Clark T.

---

希望它对你有用，我们花了几天时间来追踪它。最终发现问题出在主机设置为IP而不是域名上。 - Clark T.