清单请求上的 Webpack HMR 超时

Question

我想在我的 React 应用中使用 Webpack HMR。我的 webpack 配置如下所示：

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StyleLintPlugin = require('stylelint-webpack-plugin');
var webpack = require('webpack');

var extractScss = new ExtractTextPlugin({ filename: '[name].css' });
var stylelint = new StyleLintPlugin({ context: './source' });

module.exports = {
  devtool: 'source-map',
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './source/index.js'
  ],
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'public')
  },
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'public'),
    publicPath: 'http://localhost:1199/public/',
    historyApiFallback: true,
    proxy: {
      "*": {
        target: 'http://localhost:1199'
      }
    }
  },
  module: {
    rules: [
      { // SCSS
        test: /\.scss$/,
        use: extractScss.extract({
          use: [
            { loader: 'css-loader', options: { sourceMap: true, minimize: true } },
            { loader: 'sass-loader', options: { sourceMap: true, includePaths: ['./source/sass'] }},
            { loader: 'resolve-url-loader' }
          ],
          fallback: 'style-loader'
        })
      },
      { // JavaScript
        test: /\.js$/,
        use: [
          { loader: 'babel-loader', options: {
            "presets": [["es2015", { "modules": false }], "react" , "stage-0"],
            "plugins": ["react-hot-loader/babel"]
          } },
          { loader: 'eslint-loader'}
        ]
      }
    ]
  },
  plugins: [
    extractScss,
    stylelint,
    new webpack.HotModuleReplacementPlugin()
  ]
};

似乎一切正常，但是当我更改文件时，控制台返回

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Update failed: Error: Manifest request to bcf31e519ba66d20afbe.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange (http://localhost:8080/public/index.js:38:22)

我该怎么办？

Answer 1

Webpack 3 刚刚添加了配置超时值的选项 https://github.com/webpack/webpack/issues/1700

Answer 2

我刚刚遇到这个错误，它是由于打开了 4 个浏览器选项卡到 localhost:3000 造成的。

我关闭了其中三个，错误立即自行解决。