webpack打包图片无法显示

webpack打包图片无法显示

新手小白学习webpack 打包图片过程中遇到的问题 

使用依赖版本

文件相对目录和webpack.config.js

若删除options里面的publicPath Error: Automatic publicPath is not supported in this browser

原因参考链接http://www.79tui.com/happy/742090.html

上面是在css里面background属性添加背景图片，所以如果出现这样的问题是可以在webpack.config.js 里面的output 里面填写publicPath或者在module里面的rules 里面option里面写publicPath解决，

我不知道在这两个地方写的publicPath有什么不同？？？

在接下来在index.html中添加img标签通过src引入图片出现了第二个问题 

添加了html打包规则下面是代码：

 { 

 test:/\.html$/,

loader:'html-loader'

  }

错误截图为 

解决办法将上面代码改为

 {

              test:/\.html$/,

              loader:'html-loader',

              options:{

                  esModule:false

              }

          }

成功解决问题 

参考文档https://blog.csdn.net/xgangzai/article/details/106935104 __filename 在commonjs 规范中是当前模块在系统中的绝对路径

因为html-loader解析html文档默认的模式为es6修改esModule属性可修改解析模式。粗略理解如有错误请指出。