React Webpack HMR正在刷新页面（不是热装）-Java 学习之路

我在使反应热的webpack加载器正常工作时遇到了一些麻烦 .

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

[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 一切都按预期工作 . （但是我真的不想使用它，因为它似乎比正确的反应热装载机支持更少） .

1 回答

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

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

UPDATE: End of an era, webpack 1 docs are no longer up. For anyone still looking, HMR docs are here now.
回复于 2024-04-26T18:22:47+08:00

React Webpack HMR正在刷新页面（不是热装）

1 回答

相关问题