Webpack hmr：__webpack_hmr 404 未找到

Question

我正在使用 webpack-dev-server 进行热模块替换。它工作得很好，但是这个错误每隔几秒就会出现在控制台中：

GET http://mysite:8080/__webpack_hmr 404 (Not Found)

。

这是我的 webpack.config.js：

var webpack = require('webpack'),
  hostname = 'mysite',
  port = 8080;

module.exports = {
  entry: [
    'babel-polyfill',
    './src/js/main.js',
    './dev/requireCss.js',
    'webpack/hot/dev-server',
    // I'm assuming the fault lies in the following line, but I can't figure out what's wrong
    'webpack-hot-middleware/client?path=http://' +
      hostname +
      ':' +
      port +
      '/__webpack_hmr',
  ],
  output: {
    path: __dirname + '/webpack',
    filename: 'bundle.js',
    publicPath: 'http://' + hostname + ':' + port + '/',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader?presets[]=react&presets[]=es2015'],
      }, // removed some loaders for brevity
    ],
  },
  resolve: {
    extensions: ['', '.json', '.js', '.jsx'],
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devtool: 'source-map',
  devServer: {
    contentBase: __dirname + '/dev',
    hot: true,
    proxy: [
      {
        path: /\/(?!__webpack_hmr).+/, // I get the same error if I change this to 'path: /\/.+/'
        target: 'http://my-backend.localhost',
      },
    ],
  },
};

这个想法是，开发服务器应该将除来自

/

和

__webpack_hmr

之外的所有请求转发到我的后端 (

my-backend.localhost

)。除了

__webpack_hmr

之外，这对所有东西都适用。

我可以在我的conf中更改一些内容来使错误消失吗？

Answer 1

条目数组中的这一行与

webpack-dev-server

:

配合不佳

webpack-hot-middleware/client

因为这是

webpack-hot-middleware

与除

webpack-dev-server

之外的任何服务器（例如

express

或类似服务器）一起使用的要求。

我按照 Webpack 教程遇到了这个混合服务器问题。他们应该更新它，以便使用 webpack-dev-server 的 Webpack 配置文件的入口点不需要 webpack-hot-middleware 生成的工件，该工件试图将开发人员的模块更新热发射到自定义构建中服务器取决于它。

您可以从条目数组中删除该行，在使用开发服务器的情况下应该可以解决问题。

仅供参考，您代码中的那一行来自这里： https://github.com/webpack-contrib/webpack-hot-middleware 上面写着：

添加

webpack-hot-middleware/client?...

到 [webpack 配置的] 条目数组。这样就连接到服务器来接收 捆绑包重建然后更新客户端时的通知 相应地捆绑。

根据您的问题“我正在使用 webpack-dev-server”，因此您没有使用“webpack-hot-middleware”，应该删除输入行。

Answer 2

通过删除 entry 下的以下行来修复：

'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'

。 我不知道为什么它有效。请参阅 Amin Ariana 的回答，了解为什么这可能对你有用。

Answer 3

我将在此处添加我的答案，因为就我而言，这就是导致此问题的原因。

假设您正在使用Next.JS。

收到这个问题后，我所要做的就是关闭nodeJS（chrome调试工具，但针对BE，而不是UI）的调试窗口，然后使用

npm start

再次启动项目

我希望它能帮助任何面临这个问题的人（这里的其他答案不适合我）

Answer 4

更改端口号后问题解决了