Laravel-ReactJS: горячая замена модуля без сохранения изменений

Question

Я использовал горячую замену модуля во всех моих предыдущих проектах с использованием Vue js.Сейчас я пытаюсь реализовать это в реакции.Я уже настроил его, и он работает, когда я изменяю свои коды в браузере, за исключением случаев, когда я обновляю страницу.Это восходит к предыдущему, и я должен сделать npm run dev или npm run prod, чтобы сделать изменения постоянными.

Вот мой код

webpack.mix.js

mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig({
  output: {
    publicPath: "http://localhost:8080/"
  },
  devServer: {
    hot: true, // this enables hot reload
    inline: true, // use inline method for hmr
    contentBase: path.join(__dirname, "public"),
    https: false, //true
    port: 8080,
    headers: { "Access-Control-Allow-Origin": "*" },
    watchOptions: {
      exclude: [/bower_components/, /node_modules/]
    }
  },
  node: {
    fs: "empty",
    module: "empty"
  },
});


Mix.listen("configReady", webpackConfig => {
  if (Mix.isUsing("hmr")) {
    // Remove leading '/' from entry keys
    webpackConfig.entry = Object.keys(webpackConfig.entry).reduce(
      (entries, entry) => {
        entries[entry.replace(/^\//, "")] = webpackConfig.entry[entry];
        // }
        console.log(entries);
        return entries;
      },
      {}
    );
    // Remove leading '/' from ExtractTextPlugin instances
    webpackConfig.plugins.forEach(plugin => {
      if (plugin.constructor.name === "ExtractTextPlugin") {
        console.log(plugin.filename);
        plugin.filename = plugin.filename.replace(/^\//, "");
        console.log(plugin.filename);
      }
    });
  }
});


if (mix.inProduction()) {
  mix.version();
}

App.js реагировать

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Example s</div>

                            <div className="card-body">
                                I'm an example component!sswr
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(
        <AppContainer>
            <Example />
        </AppContainer>
    , document.getElementById('app'));
}


if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
}