react-hot-loader和Webpack热模块替换不起作用

Question

我在使用react-hot-loader进行热模块更换时遇到问题。我将相关文件保留在下面，如果您能帮助我检测出问题所在，将不胜感激。刚收到这个项目，我发现这些版本已经过时了。这可能是问题吗？

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import 'whatwg-fetch';

import Store from './redux';

import './polyfills';
import '../scss/main.scss';
import { hot } from 'react-hot-loader';

const App = () => (
  <Provider store={Store}>
    <Router history={browserHistory}>
      <Route path="/" component={AppHost}>
        "MY ROUTES ARE HERE"
      </Route>
    </Router>
  </Provider>
)

const HotApp = hot(module)(App);

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

Webpack配置：

const webpack = require('webpack');
const path = require('path');

// const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  context: __dirname,
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, '/public/js'),
    pathinfo: true,
    publicPath: '/',
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src/js'),
        query: {
          presets: [
            ['es2015', { "loose": true }],
            'stage-0',
            'react'
          ],
          plugins: ['transform-decorators-legacy', 'transform-runtime', 'react-hot-loader/babel'],
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        include: path.resolve(__dirname, 'src/font'),
        loader: 'file-loader?name=../font/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        include: path.resolve(__dirname, 'src/img'),
        loader: 'file-loader?name=../img/[name].[ext]'
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src/scss'),
        loader: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    host: '0.0.0.0',
    port: 9000,
    contentBase: 'src',
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
};

package.json：

{
  "version": "0.0.1",
  "repository": {
    "type": "git"
  },
  "main": "index.js",
  "scripts": {
    "test": "BABEL_JEST_STAGE=0 jest",
    "dev": "webpack-dev-server --progress --colors",
    "build:prod": "webpack -p --env production --config=webpack.prod.config.js --progress --colors",
    "build:test": "webpack -d --env test --config=webpack.prod.config.js --progress --colors",
    "build:dev": "NODE_ENV=development webpack -d --env development --config=webpack.prod.config.js --progress --colors",
    "static-dev": "nodemon static-server.js",
    "static": "node static-server.js",
    "pushexplore": "aws s3 cp --recursive explore  s3://app-cw.woveon.com/explore"
  },
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.22.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.7.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^2.2.2",
    "eslint-plugin-react": "^6.3.0",
    "file-loader": "^0.10.0",
    "node-sass": "^4.9.0",
    "path": "^0.12.7",
    "postcss-loader": "^1.3.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^2.11.2"
  },
  "dependencies": {
    "connect": "^3.6.6",
    "es6-promise-polyfill": "^1.2.0",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "history": "^1.17.0",
    "html-webpack-plugin": "^2.30.1",
    "moment": "^2.22.1",
    "performance-now": "^2.1.0",
    "react": "^0.14.7",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-shallow-compare": "^0.14.7",
    "react-bootstrap": "^0.31.5",
    "react-custom-scrollbars": "^4.2.1",
    "react-date-range": "^0.9.3",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-dom": "^0.14.7",
    "react-dropzone": "^3.13.4",
    "react-hot-loader": "^4.3.3",
    "react-redux": "^4.4.9",
    "react-router": "^1.0.3",
    "react-spinner": "^0.2.6",
    "redux": "^3.7.2",
    "socket.io-client": "^1.4.6",
    "webpack": "^2.7.0",
    "whatwg-fetch": "^2.0.4",
    "word-color": "^1.2.0"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  },
  "author": "",
  "description": ""
}

不胜感激！