webpack打包html中img标签引入的图片遇到的问题

解决webpack“Automatic publicPath is not supported in this browser”问题

一、起因

最近在学习webpack之时遇到了这个问题，问题是出现在学习打包html中的img标签之时，根据教程打，教程的loader配置是这样的

            {
                test:/\.(jpg|png|gif)$/,
                //多个loader时，使用use，一个时可以直接使用loader
                //下载两个包url-loader  file-loader,前者依赖于后者
                loader:'url-loader',
                options:{
                    //图片大小小于8kb,就会被base64处理
                    //优点:减少请求数量(减轻服务器压力)
                    //缺点:图片体积更大(文件请求速度更慢)
                    limit: 8 * 1024,
                }
            },
            {
                test:/\.html$/,
                //处理html中的图片问题，负责引入，从而可以被url-loader处理
                loader:'html-loader'
                
            }

在这种配置下，他的打包运行情况是html中的img的src路径会被替换成module object，这是因为url-loader是使用es6的模块化进行处理的，而html-loader是使用commonjs进行处理的，解决这个问题只需要在options中加入esModule：false即可，教程如是说。

但自己在运行的时候发现无论加不加esModule：false都是报错的，报错是Automatic publicPath is not supported in this browser，

截图如下

查找网上解决方法，发现只有最近几天的博客有这种问题。（猜想可能是版本问题，我使用的5.1.x版本，教程是4.3.x）

二、解决方法

网上说的解决方法都是在output中添加publicPath:'./'但是没说原因。

经过测试，确实可行。该方式会在输出的静态资源的路径前自动加上./这时候资源引入就成功了，也不报错。

首先说明我使用的是5.1.x版本，后续版本可能会变化。

我的目录结构：

对于publicPath的理解，我是参考此博客publicPath的理解,加上自己的测试总结出：

publicPath会自动在输出的静态资源的路径前加上我们写的值，而加上publicPath:'./'的原因就是让我们html中img标签的路径正确，因为输出的图片是在build文件夹中，但不会创建新的文件夹，我这个版本可能是需要自己加上这个publicPath，而我所看的教程是不用的，因此报错了。如果我们将输出的资源放在build中的其他文件夹，则我们的./也要改成对应路径。即输出的文件路径与publicPath路径一致。上面博客的总结是：因为一致所以可以不用写publicPath但是在我这个版本中报错了。所以加上即可。

如有错误欢迎指正！