反应热的装载机不与快递

Question

我正在使用react-hot-loader和webpack-hot-middleware with express进行实时重新加载，但它无法正常工作。 webpack侦听更改但未显示在浏览器上。我错过了什么吗？

的WebPack-config.js

if (!process.env.NODE_ENV) {
 process.env.NODE_ENV = 'development'
}

const isDevelopment = process.env.NODE_ENV === 'development';

const VENDOR_LIBS = [
    'react', 'react-dom', 'redux', 'react-redux',
    'react-router', 'react-router-redux', 'lodash',
    'express'
];

const entryPath = path.join(__dirname, 'src/index.js');

const config = {
  entry: {
    bundle: isDevelopment ? [
                            'webpack-hot-middleware/client?reload=true',
                            'react-hot-loader/patch',
                            entryPath
                          ] : entryPath,
    vendor: isDevelopment ? [
        'react-hot-loader/patch',
        VENDOR_LIBS
    ] : VENDOR_LIBS,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: isDevelopment ? '[name].[hash].js' : '[name].[chunkhash].js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        test: /\.css$/,
      },
      {
        use: ['babel-loader'],
        test: /\.js$/,
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
      }
    }),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'src/index.html',
      minify: {
        removeComments: false,
        collapseWhitespace: false,
      }
    }),
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
  ],
};
isDevelopment && config.plugins.push(new webpack.HotModuleReplacementPlugin());
!isDevelopment && config.plugins.push(
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false,
            screw_ie8: true
          },
        })
    );
module.exports = config;

的package.json

"scripts": {
    "pre-start": "webpack",
    "start-dev": "node server.js --development",
    "start-prod": "rimraf dist && webpack && node server.js --production"
  },

server.js

if (process.env.NODE_ENV !== 'production') {
  console.log('DEVOLOPMENT ENVIRONMENT: Turning on WebPack Middleware...');
  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config');

  const compiler = webpack(webpackConfig);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    hot: true,
    historyApiFallback: true,
    publicPath: webpackConfig.output.publicPath,
    contentBase: './dist/',
    stats: {
      colors: true,
      'errors-only': true
    }
  }));

  app.use(require('webpack-hot-middleware')(compiler));
} else {

  app.use(express.static(__dirname + '/dist'));
}

app.get('*', function (request, response) {

  response.sendFile(__dirname + '/dist/index.html');
});

app.listen(port);

console.log(`server started on port: ${port}`);

我不确定，但是，由于chunkhash会有问题吗？

更新

index.js

ReactDOM.render(
  <AppContainer>
    <Root store={store} history={history} />
  </AppContainer>
  , document.querySelector('#app'));

if (module.hot) {
  module.hot.accept('./components/root', () => {
    ReactDOM.render(
      <AppContainer>
        <Root store={store} history={history} />
      </AppContainer>
      , document.querySelector('#app'));
  });
}