React 热加载器在保存更改后不会更新页面答案

【问题标题】：React hot loader does not update page upon saving changesReact 热加载器在保存更改后不会更新页面
【发布时间】：2018-07-12 07:36:46
【问题描述】：

我正在使用 webpack 启动一个 React 项目并尝试让热加载工作。控制台输出显示App updated，但没有显示保存的更改（只是App.js 中div 标记之间的文本）。

例如，我将Hey sup 更改为Hey sup dude，但浏览器页面中的文本仍为Hey sup，尽管控制台说App is up to date. 我可以在手动刷新时看到更改页面。

我已尝试跟随 this React boilerplate，但无法让页面显示已保存的更改。

客户端/App.js

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        Hey sup
      </div>
    );
  }
}

webpack.dev.js

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

module.exports = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    'webpack/hot/only-dev-server',
    './client/index.js'
  ],
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    hot: true
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            'env',
            'react'
          ],
          plugins: [
            'react-hot-loader/babel'
          ]
        }
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

.babelrc

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

客户端/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';
import './style.css';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./App', () => {
    render(App);
  });
}

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

【问题讨论】：

您找到解决方案了吗？请添加它或选择一个答案，因为我有同样的问题。
我也面临同样的问题，如果有人找到解决方案，请帮助我。谢谢！！

标签： reactjs webpack react-hot-loader

【解决方案1】：

将预设更改为 latest 而不是 env 有效。

[
  "latest", {
    "es2015": {
      "modules": false
    }
  }
]

【讨论】：

【解决方案2】：

在你的 webpack 配置的入口部分，你需要添加这一行：

'webpack-dev-server/client?http://localhost:3000'

结果你会得到这样的结果：

entry: [
  'react-hot-loader/patch',
  'webpack-dev-server/client?http://localhost:3000',
  'webpack/hot/only-dev-server',
  './client/index.js'
]

Here我有一些具有该功能的代码。希望结果对您有所帮助。

【讨论】：