webpack 执行 webpack-dev-server 命令时报错 “Error: listen EADDRNOTAVAIL 192.168.1.5:8080”

在使用 webpack-dev-server 命令启动本地开发服务时，有时会遇到这样的错误提示：“Error: listen EADDRNOTAVAIL 192.168.1.5:8080”。这个错误提示的意思是，webpack-dev-server 无法在指定的 IP 地址和端口上监听请求，通常是因为该 IP 地址不存在或不可用。

原因分析

出现这个错误提示的原因有很多，下面列举一些常见的原因：

1. IP 地址不存在或不可用：如果指定的 IP 地址不存在或不可用，就会出现这个错误提示。可以通过在命令行中输入 ipconfig 命令查看本机 IP 地址，确保指定的 IP 地址是正确的。

2. 端口被占用：如果指定的端口已经被其他程序占用，就会出现这个错误提示。可以通过在命令行中输入 netstat -ano 命令查看当前所有端口的占用情况，找到占用指定端口的程序，并将其关闭或更改端口号。

3. 防火墙或代理设置：如果计算机上的防火墙或代理设置阻止了对指定 IP 地址和端口的访问，就会出现这个错误提示。可以通过关闭防火墙或更改代理设置来解决问题。

解决方法

根据不同的原因，可以采取不同的解决方法来解决这个问题。下面分别介绍一些解决方法：

1. 检查 IP 地址：在命令行中输入 ipconfig 命令，查看本机 IP 地址是否正确。如果不正确，可以尝试更换 IP 地址。

2. 更改端口号：在命令行中输入 netstat -ano 命令，查看占用指定端口的程序，并将其关闭或更改端口号。也可以在 webpack-dev-server 命令中使用 --port 参数指定一个未被占用的端口号。

3. 关闭防火墙或更改代理设置：如果防火墙或代理设置阻止了对指定 IP 地址和端口的访问，可以尝试关闭防火墙或更改代理设置。

示例代码

下面是一个简单的 webpack 配置文件，用于启动 webpack-dev-server：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

在命令行中输入以下命令启动 webpack-dev-server：

npx webpack-dev-server --config webpack.config.js

如果出现 “Error: listen EADDRNOTAVAIL 192.168.1.5:8080” 错误提示，可以尝试更换 IP 地址或更改端口号。例如，将端口号改为 8081：

devServer: {
  contentBase: './dist',
  port: 8081,
},

然后再次启动 webpack-dev-server：

npx webpack-dev-server --config webpack.config.js

如果端口号被占用，可以通过 netstat -ano 命令查看占用该端口的程序，并将其关闭或更改端口号。如果防火墙或代理设置阻止了对指定 IP 地址和端口的访问，可以尝试关闭防火墙或更改代理设置。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d27a3ca941bf71344a8de1