搭建本地服务器(webpack-dev-server)

本文详细介绍了如何使用webpack和express搭建本地开发服务器,实现代码热更新,以及如何配置package.json管理和启动服务。通过npm run dev一键启动,简化开发流程,便于测试和部署。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用webpack搭建一个本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以让浏览器自动刷新我们修改后的结果。是一个单独的模块,使用前需要进行安装:

npm install --save-dev webpack-dev-server@2.9.1

然后对webpack.config.js文件:

然后配置package.json文件(优先在本地查找),方便启动本地服务。

启动服务:npm run dev

默认运行在本地端口 :localhost:8080,点击链接访问即可 此时再去修改代码,不需要运行npm run build,也无需刷新页面,即可实现页面内容的更新。

重新配置package.json文件:

 快捷键 Ctrl+C 退出终端服务,然后输入命令:npm run dev即可直接打开运行结果,而不需要再次点击链接进行访问。

此时,我们就可以在这个本地服务其中进行测试,测试完成之后,运行一次npm run build进行打包,发送给服务器进行部署即可,而不需每一次测试都进行一个打包操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值