前言

当我们使用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进程号

webpack(10)webpack-dev-server搭建本地服务器的更多相关文章

  1. webpack 之搭建本地服务器

    搭建本地服务器 webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现 我们想要的让浏览器自动刷新显示我们修改后的结果 不过它是一个单 ...

  2. json server的简单使用(附:使用nodejs快速搭建本地服务器)

    作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...

  3. svn 使用TortoiseSVN server搭建本地SVN服务器

    使用TortoiseSVN server搭建本地SVN服务器

  4. iOS开发网络篇—搭建本地服务器

    iOS开发网络篇—搭建本地服务器 一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...

  5. IIS搭建本地服务器,花生壳实现外网通过域名访问网站

    配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...

  6. 用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器(转)

    用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器   现在不用Git,都不好意思说自己是程序员. 当你想用Git,而源代码服务器是Windows系统时,你 ...

  7. Windows 2008 Server搭建Radius服务器的方法

    原地址:http://service.tp-link.com.cn/detail_article_1113.html (图拷贝不过来) Windows 2008 Server搭建Radius服务器的方 ...

  8. python搭建本地服务器

    python搭建本地服务器 python3以上版本 'python3 -m http.server 8000' 默认是8000端口,可以指定端口,打开浏览器输入http://127.0.0.1:800 ...

  9. $Eclipse+Tomcat搭建本地服务器并跑通HelloWorld程序

    本文结构:(一)环境准备(二)在Eclipse里创建Dynamic Web工程(三)写一个简单的Servlet类并配置web.xml(四)运行程序 (一)环境准备 1.Eclipse:要使用for J ...

  10. windows 下使用 Filezilla server 搭建 ftp 服务器

    windows 下使用 Filezilla server 搭建 ftp 服务器 1. Filezilla server 免费,开源, ftp 服务端 2. 下载安装, windows  https:/ ...

随机推荐

  1. 『动善时』JMeter基础 — 26、使用txt文件实现JMeter参数化

    目录 1.测试计划中的元件 2.数据文件内容 3.线程组元件内容 4.HTTP信息头管理器组件内容 5.CSV数据文件设置组件内容 6.HTTP请求组件内容 7.脚本运行结果 之前我们都是使用.csv ...

  2. 六、.net core (.NET 6)程序部署到Docker上

    使用Docker部署应用程序 首先确保已经安装Docker 桌面软件,如下图: 然后,把需要部署到Docker上面的项目,咱们先添加Docker的支持,启动项目右键 -> 添加 -> Do ...

  3. 06.ElementUI 2.X 源码学习:源码剖析之工程化(一)

    0x.00 前言 在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件.发布npm以及生成展示文档之后.接下来将分析Element项目的代码结构,学习其工程 ...

  4. 'utf-8' codec can't decode byte 0xd5 in position XXX: invalid continuation byte问题

    找了一下午,各种资料搜集,愣是没搜出来答案. 结果今天早上,做一个小小的改变,就整出来了... 步骤如下: 1.打开excel,全选数据 2.新建记事本,粘贴,选择脚本,更改字体: 3.新建Excel ...

  5. 干货:ANR日志分析全面解析

    一.概述 解决ANR一直是Android 开发者需要掌握的重要技巧,一般从三个方面着手. 开发阶段:通过工具检查各个方法的耗时,卡顿情况,发现一处修改一处. 线上阶段:这个阶段主要依靠监控工具发现AN ...

  6. CUDA运行时 Runtime(一)

    CUDA运行时 Runtime(一)             一. 概述 运行时在cudart库中实现,该库通过静态方式链接到应用程序库cudart.lib和libcudart.a,或动态通过cuda ...

  7. 所有处理都走向AI

    所有处理都走向AI All Processing Bends Toward AI 旧金山--谷歌正在试验机器学习(ML)来执行集成电路设计中的位置和路径,并取得了很好的效果.上周在ISSCC会议上宣布 ...

  8. Nvidia TensorRT开源软件

    TensorRT开源软件 此存储库包含NVIDIA TensorRT的开源软件(OSS)组件.其中包括TensorRT插件和解析器(Caffe和ONNX)的源代码,以及演示TensorRT平台使用和功 ...

  9. 小白自制Linux开发板 一. 瞎抄原理图与乱画PCB

    因为墨云是基于高中物理水平的电路知识来学习.而且此前也就玩过树莓派.Esp8266之类的开发板,水平基础趋近于零,所以在写这个系列的时候抱着记录的心态.还望不足之处还望大佬们指正. <论语> ...

  10. python_request 使用jsonpath取值结果,进行接口关联

    一.jsonpath的安装 pip   install  jsonpath 二.使用举例 import jsonpath d1={"token":"hjshdsjhdsj ...