关于webpack-dev-server不能及时更新的问题

本文介绍了如何配置webpack-dev-server实现文件更改后的自动刷新功能。关键在于正确设置webpack配置文件中的publicPath选项,确保开发服务器能正确定位并加载更新后的资源。

问题描述:

配置好了webpack-dev-server之后,修改文件,发现它可以重新编译,但是浏览器页面并没有自动更新。

比如我在脚本里新添了一句alert(1234), 虽然webpack-dev-server重新编译了,但是浏览器页面并没有弹出1234.

解决:

需要在webpack.config.js中配置output的publicPath项。如下所示:

1 output: {
2     path: path.resolve(__dirname, 'dist'), //打包后存放的地址
3     publicPath:'/dist', //访问文件时用的地址
4     filename: 'js/[name].js'
5   }

解释:

webpack官网有这么一句话:The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from.

意思就是说,webpack-dev-server通过publicPath配置项提供的地址来寻找所服务的文件。

而我们一般想着它会通过path设置的地址找文件。其实path的地址是用来指定打包后的文件要存放在哪里。

转载于:https://www.cnblogs.com/reiko/p/9460854.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值