webpack5跑webpack-dev-server的时候报错Error: Automatic publicPath is not supported in this browser的解决方案

最近跟着B站大佬视频学习webpack5手动配置webpack构建工具,遇到了这个问题。

问题描述: 在使用webpack-dev-server本地服务的时候,则报错Error: Automatic publicPath is not supported in this browser,如下图
在这里插入图片描述
各个工具版本

  • webpack @5.1.3
  • webpack-cli @4.0.0
  • node @10.11.0

报错原因分析: 首先我webpack打包出来后运行的html没有报错的。然后当我修改url-loader的options配置的limit都大于我测试的图片资源大小时,webpack-dev-webpack也是能跑的。

所以目前问题很明显是因为图片打包之后的路径找不到,网上找了很多资料说在output里添加 publicPath: './',但是这样一样没有解决问题。

解决方案: 最后在url-loader里options配置路径publicPath: './',就解决了。

在这里插入图片描述

总结: 个人觉得原因应该是webpack-dev-server因为只会在内存中运行,不会实际打包出来,不会执行到output这一步,所以在output里添加publicPath: './'没办法解决这个问题。最后在url-laoder里配置了这个相对路径之后,webpack-dev-server运行后,也配置在内存里,所以能找到。

需要注意的是,output还是要添加的,因为考虑到需要打包出来资源。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值