javascript – React Webpack HMR正在刷新页面(不是热装)

我在使反应热的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,一切都按预期工作. (但我真的不想使用它,因为它看起来比正确的反应热装载机支持更少).

解决方法

我刚遇到这个问题.几件事：

要帮助调试您的特定问题,请尝试启用“保留日志”(在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非常有用.

更新：一个时代的结束,webpack 1文档不再起作用.对于仍在寻找的人,HMR docs are here now.

原文地址：https://www.jb51.cc/js/158903.html