webpack(10)webpack-dev-server搭建本地服务器
前言
当我们使用webpack
打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-server
webpack-deb-server
webpack
提供了一个可选的本地开发服务器,这个本地服务器基于node.js
搭建,内部使用express
框架,可以实现我们想要的浏览器自动刷新显示我们修改后的结果
由于它是个单独的模块,使用之前,我们需要先安装,命令如下:
npm install -D webpack-dev-server
安装完成之后,我们也是需要在webpack
中进行配置,配置的对象是devServer
,它也有很多的属性,常用的几个属性如下:
contentBase
:为哪一个文件提供本地服务,默认是根文件,我们这里要填写./dist
port
:端口号,默认是8080inline
:页面实时刷新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(10)webpack-dev-server搭建本地服务器的更多相关文章
- webpack 之搭建本地服务器
搭建本地服务器 webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现 我们想要的让浏览器自动刷新显示我们修改后的结果 不过它是一个单 ...
- json server的简单使用(附:使用nodejs快速搭建本地服务器)
作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...
- svn 使用TortoiseSVN server搭建本地SVN服务器
使用TortoiseSVN server搭建本地SVN服务器
- iOS开发网络篇—搭建本地服务器
iOS开发网络篇—搭建本地服务器 一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...
- IIS搭建本地服务器,花生壳实现外网通过域名访问网站
配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...
- 用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器(转)
用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器 现在不用Git,都不好意思说自己是程序员. 当你想用Git,而源代码服务器是Windows系统时,你 ...
- Windows 2008 Server搭建Radius服务器的方法
原地址:http://service.tp-link.com.cn/detail_article_1113.html (图拷贝不过来) Windows 2008 Server搭建Radius服务器的方 ...
- python搭建本地服务器
python搭建本地服务器 python3以上版本 'python3 -m http.server 8000' 默认是8000端口,可以指定端口,打开浏览器输入http://127.0.0.1:800 ...
- $Eclipse+Tomcat搭建本地服务器并跑通HelloWorld程序
本文结构:(一)环境准备(二)在Eclipse里创建Dynamic Web工程(三)写一个简单的Servlet类并配置web.xml(四)运行程序 (一)环境准备 1.Eclipse:要使用for J ...
- windows 下使用 Filezilla server 搭建 ftp 服务器
windows 下使用 Filezilla server 搭建 ftp 服务器 1. Filezilla server 免费,开源, ftp 服务端 2. 下载安装, windows https:/ ...
随机推荐
- 『动善时』JMeter基础 — 26、使用txt文件实现JMeter参数化
目录 1.测试计划中的元件 2.数据文件内容 3.线程组元件内容 4.HTTP信息头管理器组件内容 5.CSV数据文件设置组件内容 6.HTTP请求组件内容 7.脚本运行结果 之前我们都是使用.csv ...
- 六、.net core (.NET 6)程序部署到Docker上
使用Docker部署应用程序 首先确保已经安装Docker 桌面软件,如下图: 然后,把需要部署到Docker上面的项目,咱们先添加Docker的支持,启动项目右键 -> 添加 -> Do ...
- 06.ElementUI 2.X 源码学习:源码剖析之工程化(一)
0x.00 前言 在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件.发布npm以及生成展示文档之后.接下来将分析Element项目的代码结构,学习其工程 ...
- 'utf-8' codec can't decode byte 0xd5 in position XXX: invalid continuation byte问题
找了一下午,各种资料搜集,愣是没搜出来答案. 结果今天早上,做一个小小的改变,就整出来了... 步骤如下: 1.打开excel,全选数据 2.新建记事本,粘贴,选择脚本,更改字体: 3.新建Excel ...
- 干货:ANR日志分析全面解析
一.概述 解决ANR一直是Android 开发者需要掌握的重要技巧,一般从三个方面着手. 开发阶段:通过工具检查各个方法的耗时,卡顿情况,发现一处修改一处. 线上阶段:这个阶段主要依靠监控工具发现AN ...
- CUDA运行时 Runtime(一)
CUDA运行时 Runtime(一) 一. 概述 运行时在cudart库中实现,该库通过静态方式链接到应用程序库cudart.lib和libcudart.a,或动态通过cuda ...
- 所有处理都走向AI
所有处理都走向AI All Processing Bends Toward AI 旧金山--谷歌正在试验机器学习(ML)来执行集成电路设计中的位置和路径,并取得了很好的效果.上周在ISSCC会议上宣布 ...
- Nvidia TensorRT开源软件
TensorRT开源软件 此存储库包含NVIDIA TensorRT的开源软件(OSS)组件.其中包括TensorRT插件和解析器(Caffe和ONNX)的源代码,以及演示TensorRT平台使用和功 ...
- 小白自制Linux开发板 一. 瞎抄原理图与乱画PCB
因为墨云是基于高中物理水平的电路知识来学习.而且此前也就玩过树莓派.Esp8266之类的开发板,水平基础趋近于零,所以在写这个系列的时候抱着记录的心态.还望不足之处还望大佬们指正. <论语> ...
- python_request 使用jsonpath取值结果,进行接口关联
一.jsonpath的安装 pip install jsonpath 二.使用举例 import jsonpath d1={"token":"hjshdsjhdsj ...