Question

我正在调试为什么热的中间件重新加载要花很长时间才能识别更改和刷新，我注意到在客户端日志中最大的问题是错误

Failed to load resource :net::ERR_INCOMPLETE_CHUNKED_ENCODING

在我将更改保存到我的reactjs代码后直接显示。直到5-10秒后，它才重新连接并刷新带有reactjs代码更改的页面。我在网上进行了调查，并从相关的回购问题中注意到，大多数问题是与特定节点版本有关的超时问题，但是我正在最新的10.16.1版本上运行，如果到目前为止仍然存在错误，我会感到惊讶这些问题出现了。

以下是客户端日志和活动的过程：

1）服务器加载

[HMR] connected

2）Reactjs文件更改并保存

[HMR] bundle rebuilding
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING

3）经过5到10秒钟，页面刷新后出现更改

[HMR] connected
[HMR] Checking for updates on the server...
GET http://localhost:3000/dab40325d66ab598cdc3.hot-update.json 404 (Not Found)
(Warning) [HMR] Cannot find update (Full reload needed)
(Warning) [HMR] (Probably because of restarting the server)
(Warning) [HMR] Reloading page

这是我的Webpack配置：

const webpack = require('webpack');

module.exports = {
    entry: [
      'webpack-hot-middleware/client?reload=true',
      './src/index.js',
    ],
    mode: 'development',
    output: {
      path: __dirname + '/dist',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
  }

这是我的服务器配置：

const express = require('express');
const app = express();
const port = 3000;

const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);



console.log(process.env.TEST);

app.use(require('webpack-dev-middleware')(compiler, {
    hot: true,
    publicPath: webpackConfig.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));


app.get('/', (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

app.listen(port, () => {
    console.log(`Server on: ${port}`)
})

Webpack热中间件：net :: ERR_INCOMPLETE_CHUNKED_ENCODING

0 个答案: