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

Question

我正在按照官方webpack 教程设置 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 output 正确编译，但是当 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。

Answer 1

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

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

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

这是那些想要阅读更多内容的人的链接。

Answer 2

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

lsof -i :8080

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

kill -15 <PID>

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

Answer 3

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

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