webpack4熱更新redux(does not support changing `store` on the fly.)

webpack使用熱更新后redux 報錯如下

嘗試了很多方法都不行，react更新使用的是webpack-hot-middleware + webpack-dev-middleware, 采用node server.js 啟動服務。熱更新是可以使用的，但是只要修改保存后，redux就報上面的錯誤。找了很多原因也沒有解決，下面是入口的配置server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const path = require('path');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  noInfo: false, //  顯示無信息到控制臺（僅警告和錯誤
  historyApiFallback: true,
  stats: {
    colors: true,
  } 
}));

app.use(webpackHotMiddleware(compiler));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
})

app.use(express.static(path.join(__dirname, 'public')));
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');


const nodeEnv = process.env.NODE_ENV || 'development';
const isPro = nodeEnv === 'production';

module.exports = {
  devtool: 'inline-source-map',
  mode: 'development',
  entry: {
    // app: './src/index.js',
    app: ['webpack-hot-middleware/client', __dirname + '/src/index.js'], //webpack-hot-middleware/client
    // app: ['webpack/hot/dev-server','./src/index.js'], //webpack-hot-dev-server/client
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
            loader: 'babel-loader',
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'webpack4',
      template: './index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
          NODE_ENV: '"development"'
      }
    }),
    new webpack.DefinePlugin({
       "__dev__": JSON.stringify(isPro) 
    }),
  ],
  resolve: {
    extensions: [".js", ".json", ".jsx", ".css", "less"],
  },

  // devServer: {
  //   publicPath: '/', //注意這里，相應看html的引用路徑為如果寫 /test/,那么引用就是 /test/+ 資源文件名
  //   contentBase: path.resolve(__dirname, 'dist'),
  //   historyApiFallback: true,
  //   hot: true,
  //   inline: true,
  //   open: true,
  //   noInfo: true
  // }

};

入口文件index.js

import React from 'react';
import { render } from 'react-dom';
import AppRouter from './router.js'

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './configReducer'
const store = rootReducer()

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

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppRouter />
      </Provider>
    );
  }
}

hot(module)(Root)

render(
  <Root />,
  document.getElementById('root')
);

入口文件reducer.js

import rootReducer from './reducers/index';
import { createStore, applyMiddleware, compose } from 'redux';

export default function configureStore(initialState) {

  const Store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      const nextRootReducer = require('./reducers/index');
      Store.replaceReducer(nextRootReducer);
    });
  }

  return Store;
}