React + Webpack HMR 正在刷新页面（不是热加载）

Question

我在让 react-hot webpack 加载程序正常工作时遇到了一些麻烦。

当我加载页面时，如我所料得到以下信息：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

但是当我保存更改时，页面会自动硬刷新浏览器（而不是 HMR 替换）。

//webpack.config.js

 {
  entry: {
    client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port
    app: "./HelloWorld.tsx"
  },
  devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
  output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].entry.js'
  },
  module: {
    loaders: [
      {
        test: /\.ts(x?)$/,
        loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader']
      }
    ]
  },
    devServer: {
        contentBase: "./dist",
    port:8786
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
}

命令：webpack-dev-server --hot --inline

如果我使用 babel-preset-react-hmre 一个有趣的旁注，一切都会按预期进行。（但是我真的不想使用它，因为它似乎不如正确的 react-hot loader 支持）。

Answer 1

我刚运行遇到这个问题。几件事：

为了帮助调试您的特定问题，请尝试启用 "Preserve log"（在 Chrome 开发工具中）。这将在页面刷新时保留控制台日志，因此您至少能够在触发刷新之前看到 webpack-dev-server 正在记录的任何消息。

在我的例子中，webpack-dev-server 正在刷新，因为我没有在我的入口 js 文件中选择加入 HMR。在文件中添加以下行解决了问题：

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

有关 module.hot API 的详细信息 webpack HMR docs 非常有帮助。

React + Webpack HMR 正在刷新页面（不是热加载）

React + Webpack HMR is refreshing the page (not hot loading)

javascript

reactjs

webpack

webpack-dev-server

react-hot-loader