React hot reload not working with webpack 4

断了今生、忘了曾经 提交于 2019-12-10 16:48:18

问题


React hot reload is not working. In webpack entry, I have following code.

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')
        ]
    },

and in dev-server I have hot = true;

and i have below code for wrapping Provider in hot

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);

This is result in console, but nothing happens when there is some change. So basically it appears as if hot reload is working but.. no changes reflects. What am I missing here. ?

I am using react 16.2.* and react-hot-loader @4.0.* an webpack @4.5.*


回答1:


try updating your dev server config like so

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);


来源:https://stackoverflow.com/questions/49670999/react-hot-reload-not-working-with-webpack-4

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!