在端口 8080 上使用 Webpack 开发服务器获取 ERR_CONNECTION_RESET答案

【问题标题】：Getting an ERR_CONNECTION_RESET with Webpack Dev Server on port 8080在端口 8080 上使用 Webpack 开发服务器获取 ERR_CONNECTION_RESET
【发布时间】：2020-02-19 01:02:45
【问题描述】：

我正在关注官方webpack tutorial 设置 webpack 开发服务器。这是我的 webpack 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    // port: 8081 // <-- uncommenting this line gets rid of the error
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management',
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

但是，当我尝试运行服务器时，我遇到了一个奇怪的问题。代码根据 webpack 输出正确编译，但是当 URL 尝试在 Chrome/Safari 中打开时，我得到“无法访问此站点”ERR_CONNECTION_RESET。在上面的配置中，当我取消注释 8081 行时，一切都按预期工作（除了服务器现在位于端口 8081 上）。

一开始以为端口一定被占用了，结果发现不是这样，因为我可以运行类似的文件

var http = require('http');

http.createServer(function (req, res) {
  res.write('Hello World!');
  res.end();
}).listen(8080);

并在端口 8080 上查看预期的 Hello World。

为什么 webpack 开发服务器无法在 8080 端口上工作？

如果重要的话，我使用的是 OSX 10.15 Catalina 和 Node.js v12.13.0。

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

对于那些仍然无法弄清楚的人。我在 github 中找到了这个链接，这对我来说非常有用。

将此添加到 package.json 文件中的启动脚本

"start": "webpack-dev-server --config webpack/webpack.config.dev.js --host 0.0.0.0 --hot --open --useLocalIp"

this is the link for those who want to read more.

【讨论】：

我更改了用于运行代码的计算机，然后这个问题开始发生。谢谢。这为我解决了。我还是不明白为什么

【解决方案2】：

使用相同的配置对我有用。尝试通过以下方式检查端口状态（可能与 webpack 发生冲突）：

lsof -i :8080

这将列出是否有东西在使用它，如果是这种情况，请获取显示的 PID 号并：

kill -15 <PID>

PD。（这将是一条评论，但我还不能添加 cmets）。

【讨论】：

那表示端口可用。您是否尝试过使用其他 webpack 配置？
是的，我在 webpaIck 开发服务器上打开了一个问题：github.com/webpack/webpack-dev-server/issues/2295.Lsof 如果端口是 8080 是其他端口，似乎会给出不同的输出。非 8080 端口有更多的输出行。也许这意味着什么？ Github issue中有详细说明。
真的很奇怪?。我通常使用端口 8080，而自定义 webpack 配置没有问题。也许与您的计算机有关。
是的，我也不知道在哪里可以找到这种东西：/

【解决方案3】：

对我来说，是 ESET 阻止了该端口。

您可以在 Preferences -> Web Access Protection -> Enable HTTP 协议检查下禁用它（取消选中复选框或更改端口）。

【讨论】：