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