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

Question

我在使用react-hot webpack loader时遇到了一些问题。

当我加载页面时，如预期的那样，会出现以下内容:

[HMR] 等待来自WDS的更新信号...
[WDS] 启用热模块替换。

但是当我保存更改时，页面会自动刷新浏览器(而不是进行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支持要少。）

- undefined

---

如果您正在使用带有hot + inline的命令行devserver，则不应在配置中另外指定它。 - Dominic

@dominictobias 我有遗漏什么吗？据我所知，我在配置中没有指定 hot 或 inline。 - undefined

你在其中有client: 'webpack-dev-server/client?http://localhost:8786'，不确定它是否有帮助，但当使用开发服务器的这些选项时，不应添加它。 - Dominic

实际上，使用 react-hot 应该就可以了。我也遇到了同样的问题（刷新而不是热替换），但请注意，这些热加载器都不支持无状态的 React 组件。如果还不行的话，你可能想试试 https://github.com/gaearon/react-transform-hmr。 - Dominic

@dominictobias，我认为问题不在组件本身，因为如果我使用babel-preset-react-hmre，它会热加载更改。我会看一下react-transform-hmr，从那里看来，很快就会有一个新的react-hot loader，我也可以尝试一下。 - undefined

Answer 1

我刚遇到了这个问题。 有几点需要注意：

为了帮助调试您的特定问题，请尝试启用“保留日志”（在Chrome Dev工具中）。 这将跨页面刷新保留控制台日志，因此您至少可以查看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文档。

- Elliot

---

你在哪里添加了以下行？ - AKFourSeven

在提供给Webpack作为项目“入口”的文件中。 - Elliot

对我来说没有奏效 - Maksim Nesterenko