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

Myth丶恋晨 2022-11-20 08:27 450阅读 0赞

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

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

*  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: './'`，就解决了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70_pic_center 1]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/db4274d11f454a1493395bf401880622.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201027230915454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70#pic_center