在端口8080上通过Webpack Dev Server获取ERR_CONNECTION_RESET

Question

我正在遵循官方的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的输出正确编译，但是当尝试在Chrome / Safari中打开该URL时，会显示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上工作？

如果有问题，我将使用带有Node.js v12.13.0的OSX 10.15 Catalina。

我正在遵循官方的Webpack教程来设置Webpack开发服务器。这是我的webpack配置：const path = require（'path'）; const HtmlWebpackPlugin = require（'html-webpack-plugin'）; const ...

Answer 1

使用相同的配置对我有用。尝试通过以下方法检查端口状态：