在端口 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協議檢查下禁用它（取消選中復選框或更改端口）。