webpack-dev-server搭建本地服务器的实现

2022-04-15 0 573
目录
  • 前言
  • 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

1.卸载webpack-cli

npm uninstall webpack-cli

2.安装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搭建本地服务器 的文章就介绍到这了,更多相关webpack-dev-server搭建本地服务器 内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript webpack-dev-server搭建本地服务器的实现 https://www.niceym.com/29906.html