在端口 8080 上使用 Webpack Dev Server 获取 ERR_CONNECTION_RESET

Question

我正在按照官方webpack 教程来设置 webpack 开发服务器。这是我的 webpack 配置：

\n\n

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

\n\n

然而，当我尝试运行服务器时，我遇到了一个奇怪的问题。代码根据 webpack 输出正确编译，但是当 URL 尝试在 Chrome/Safari 中打开时，我得到“This site can\xe2\x80\x99t bereached”，带有ERR_CONNECTION_RESET. 在上面的配置中，当我取消注释时8081行时，一切都会按预期工作（除了服务器现在位于端口 8081 上）。

\n\n

最初，我认为端口一定被占用，但发现事实并非如此，因为我可以运行如下文件

\n\n

var http = require(\'http\');\n\nhttp.createServer(function (req, res) {\n  res.write(\'Hello World!\');\n  res.end();\n}).listen(8080);\n

\n\n

并看到预期的Hello World。

\n\n

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

\n\n

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

\n

Answer 1

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

lsof -i :8080

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

kill -15 <PID>

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