本篇内容介绍了“webpack-dev-server搭建本地服务器的实现方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
目录
前言
webpack-deb-server
webpack-dev-server启动报错
解决方案1
解决方案2
解决端口占用问题
前言
当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server
webpack-deb-server
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果
由于它是个单独的模块，使用之前，我们需要先安装，命令如下：
npm install -D webpack-dev-server安装完成之后，我们也是需要在webpack中进行配置，配置的对象是devServer ，它也有很多的属性，常用的几个属性如下：
contentBase：为哪一个文件提供本地服务，默认是根文件，我们这里要填写./dist
port：端口号，默认是8080
inline：页面实时刷新
historyApiFallBack：在SPA(单页面复应用)页面中，依赖HTML5的history模式
webpack.config.js配置如下：
module.exports = { devServer: { contentBase: "./dist", inline: true, },}接下来我们再在package.json文件中添加一条script命令：
"scripts": { "dev": "webpack serve" },dev代表开发环境，以上我们的配置就算完成了
webpack-dev-server启动报错
然后我们启动命令npm run dev，程序出现以下报错：
Error: Cannot find module 'webpack-cli/bin/config-yargs'
原因是webpack-cli的版本问题，我们先来看以下我们的版本
"webpack": "^5.44.0","webpack-cli": "^4.7.2","webpack-dev-server": "^3.11.2"解决方案1
降低webpack-cli的版本，从4降到3
卸载webpack-cli
npm uninstall webpack-cli安装webpack-cli@3
npm install webpack-cli@3 -D然后启动就不会报错了，但是这只是临时的解决方案，我们推荐第二种解决方式
解决方案2
更改scripts中的配置，将原来的webpack-dev-serve改为webpack serve即可
"scripts": { "dev": "webpack serve --open --mode development"},最后我们在终端输入npm run dev就可正常启动，并且会自动打开网页，因为我们加了参数--open，如果想手动打开，则取出--open即可
解决端口占用问题
如果你通过vue+webpack已经启动了一个项目，但是你又执行了一遍npm run dev，此时就会报以下错误
Error: listen EADDRINUSE: address already in use 127.0.0.1:8080
原因是我们上次启动的默认端口是8080，这次你又项启动一个项目端口依然是8080，但是8080端口已经被占用了，解决办法我们只需要将8080端口对应的PID进程号杀死即可
首先查找8080端口对应的进程ID
lsof -i:8080找到对应的PID后使用kill命令杀死即可
kill -9 PID进程号“webpack-dev-server搭建本地服务器的实现方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
