在前端开发中，经常需要使用webpack-dev-server搭建本地开发环境。但是，在使用webpack-dev-server启动服务时，会出现一些错误。其中最常见的就是Error: listen EADDRINUSE: address already in use。这个错误的意思是端口已被占用。
什么是webpack-dev-server
webpack-dev-server是一个能够提供webpack打包后的代码的运行环境，它支持实时更新和自动刷新，能够提高开发效率。webpack-dev-server的特点如下:
提供本地开发环境，与真实环境一致
支持热更新，省去手动刷新的麻烦
通过代理转发，在跨域时能够解决一些问题
支持多页面应用，可以在不同端口上启动多个页面
报错原因
当我们在运行webpack-dev-server时，如果端口被其他服务占用，就会出现Error: listen EADDRINUSE: address already in use错误。这个错误的原因是webpack-dev-server监听的端口已经被其他服务占用了。
解决方法
在解决这个问题之前，我们需要先知道如何查看当前占用了哪些端口。在命令行中输入netstat -ano可以显示当前系统使用的所有端口和占用它的进程。
解决方法有两种：
1. 修改端口号
我们可以通过修改webpack-dev-server监听的端口号来避免这个问题。在webpack配置文件中找到devServer属性，添加port属性，修改端口号。比如我们将已占用的端口号4000改为4001。
// webpack.config.js
module.exports = {
// ...
devServer: {
port: 4001
}
// ...
}2. 停止占用该端口的服务
如果不想改端口号，就需要停止占用该端口的服务。我们可以根据netstat -ano命令输出的进程号，在任务管理器中寻找对应的进程，并结束它。
// 先查看端口4000的进程号 netstat -ano | findstr "4000" // 输出如下 TCP 0.0.0.0:4000 0.0.0.0:0 LISTENING 12345 // 根据进程号结束进程 taskkill /f /pid 12345
3. 自动查找空闲端口
我们可以通过portfinder模块自动查找空闲端口。在webpack配置文件中添加如下代码。
// javascriptcn.com 代码示例
const portfinder = require('portfinder')
const port = 4000 // 默认端口号
// 查找空闲端口
portfinder.basePort = port
portfinder.getPort((err, port) => {
if (err) {
console.log(err)
} else {
console.log(`Listen at http://localhost:${port}`)
// 启动 webpack-dev-server
devServer: {
port: port
}
}
})总结
上述方法可以帮助我们解决webpack-dev-server报错Error: listen EADDRINUSE: address already in use问题。通过修改端口号、停止占用该端口的服务、自动查找空闲端口，我们可以很好的避免端口冲突的问题。在学习webpack-dev-server时，我们应该注意这个问题的处理，以避免浪费宝贵的开发时间。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653225ba7d4982a6eb468078