webpack(10)webpack-dev-server搭建本地服务器「建议收藏」

webpack(10)webpack-dev-server搭建本地服务器「建议收藏」前言当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-ser

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

当我们使用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(单页面复应用)页面中,依赖HTML5history模式

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进程号
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164844.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号