webpack4 监视模式自动加载,webpack-dev-server的使用

本文介绍如何使用webpack-dev-server实现项目的实时加载。通过安装webpack-dev-server并进行简单配置,即可实现在开发过程中对代码更改的即时反馈。具体步骤包括安装、配置package.json文件以及启动命令。

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

webpack版本:4.29.6

ebpack-dev-server为您提供了一个简单的Web服务器和使用实时重新加载的能力。

安装

npm install --save-dev webpack-dev-server

 package.json

module.exports = {
    ....
    },
devServer: {
     contentBase: './dist'   //这告诉webpack-dev-server我们从dist目录中提供文件localhost:8080
   },

 package.json

"scripts": {
      "start": "webpack-dev-server --open", //加上这个,之前配置好的不改
    },

运行:run start

完美,已经开始实时加载

然后会看到这个页面:

点击view里的html文件,或者点击打包好的html文件(一定要在上面截图这个页面点开才能看到效果),在本地编辑器修改html代码,就会自动帮你打包好实时加载了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值