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进程号
原文地址:https://www.cnblogs.com/jiakecong/p/15006060.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【numpy】新版本中numpy(numpy>1.17.0)中的random模块
- 用C++跟你聊聊“代理模式”
- mybatis与spring整合步骤以及自己遇到的错误
- 用C++跟你聊聊“装饰者模式”
- 【python实现卷积神经网络】激活函数的实现(sigmoid、softmax、tanh、relu、leakyrelu、elu、selu、softplus)
- 【python实现卷积神经网络】损失函数的定义(均方误差损失、交叉熵损失)
- 【python实现卷积神经网络】优化器的实现(SGD、Nesterov、Adagrad、Adadelta、RMSprop、Adam)
- 用C++跟你聊聊“策略模式”
- 【python实现卷积神经网络】卷积层Conv2D反向传播过程
- 【python实现卷积神经网络】全连接层实现
- 来我们聊聊“简单工厂模式”
- 【python实现卷积神经网络】批量归一化层实现
- 【python实现卷积神经网络】池化层实现
- srand()和rand(),生成随机数,留给我自己看
- 【python实现卷积神经网络】padding2D层实现