Javascript React hot loader未在浏览器中显示更改

我知道以前有人问过这个问题。但是没有一个为我工作。当我更改代码时，控制台显示

[WDS]应用程序热更新

但我看不到浏览器中发生的变化。我使用的是最新的

react hot loader

，

webpack^2.2.0-rc.0

和相同版本的

webpack dev server

。这是我的网页包配置文件

const VENDOR_LIBS = [
  'react', 'lodash', 'redux', 'react-redux', 'react-dom',
  'react-input-range', 'redux-form', 'fabric'
];

module.exports = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    // publicPath: 'dist/'
  },
  module: {
      rules: [
        {
          loader: ExtractTextPlugin.extract({
            loader: 'css-loader'
          }),
          test: /\.css$/,
        },
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/,
        },
        {
          use: [
            {
              loader: 'url-loader',
              options: { limit: 40000 }
            },
            'image-webpack-loader'
          ],
          test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/,
        },
      ],
    },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.AggressiveMergingPlugin(),
  ],
  devServer: {
    historyApiFallback: true,
    hot: true
  },
};

babelrc

{
  "presets": ["babel-preset-env", "react"],
  "plugins": ["transform-object-rest-spread"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

index.js

const App = () => {
  const store = createStore(reducers, {}, applyMiddleware());

  return (
    <Provider store={store}>
      <ConvertImage />
    </Provider>
  );
};

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

const-App=（）=>{
const store=createStore（reducer，{}，applyMiddleware（））；
返回(
);
};
ReactDOM.render（，document.getElementById（'root'））；

---

我使用的是

系统。在异步路由的路由中导入
。
在packages.json中，您需要有如下内容：
“脚本”：{
“开始”：“webpack dev server--progress--inline--hot--host 0.0.0.0”
您必须在运行时使用嵌入式HMR API来接受来自服务器的更改。您至少需要在entrypoint脚本中添加以下内容：

if (module.hot) {
    module.hot.accept()
}

请查看新文档中提供的，以获得更好的想法。
您需要对
index.js
代码稍作更改

进口RHL
否则，请检查是否启用热加载
把它包在AppContainer上
您的代码大致如下所示

// Your other deps go here
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

const App = () => {
  const store = createStore(reducers, {}, applyMiddleware());

  return (
    <Provider store={store}>
      <ConvertImage />
    </Provider>
  );
};

if (module.hot) {
  module.hot.accept();
  ReactDOM.render(
    <AppContainer>
      <App />
    </AppContainer>, document.getElementById("root")
  );
}
else {
  ReactDOM.render(<App />, document.getElementById("stub"));
}

//您的其他部门到这里来
从“React”导入React；
从“react dom”导入react dom；
从“react hot loader”导入{AppContainer}；
常量应用=（）=>{
const store=createStore（reducer，{}，applyMiddleware（））；
返回(
);
};
如果（模块热）{
module.hot.accept（）；
ReactDOM.render(
，document.getElementById（“根”）
);
}
否则{
render（，document.getElementById（“存根”）；
}

另外，将您的“react hot loader/patch”添加到webpack config中的条目数组中
我有webpack dev server但没有内联标志。我会尝试一下。我做了webpack dev server--progress--inline--hot--host但没有工作。这与此相同，在浏览器上看不到任何更改。