【webpack】webpack打包后, 静态图片资源不显示的若干个问题

背景 :
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库
其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了
遇到了以下问题, 小小记录一下~

1. 打包时报错

问题 : webpack打包时报以下错

解决 : webpack module配置vue-loader 或 file-loader
原因 : webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系, 因为像 .png 这样的文件不是一个 JavaScript 模块，需要配置 webpack 使用 file-loader 或者 url-loader 去合理地处理它们。
(下截图是最后改进版本, 也就是解决该帖子所有问题的终极版~)

2. 打包时不报错, 但项目引用组件时, 静态图片不显示, src地址是[object Module]

问题 : webpack配置url-loader后, 打包时不报错了, 但在项目引用组件时, 组件内的静态图片不显示,src地址如下图

解决 :
** loader.options.esModule : false**
参考 : https://www.jb51.net/article/176947.htm

2) 设置esModule : false 后, 图片src还是[object Module],
排查 :
对比打包后dist的js的图片url 和 实际打包后dist生成的图片url, 两个url是对不上的, 说明图片引用地址依然有问题


解决 :

1. url-loader配置outputPath和publicPath,
2. 打包后静态图片路径是 static/img, 那么我把静态图片也放在引用的vue文件的同级目录static/img, 那么打包前和打包后的路径就对上啦!
   

3. webpack打包后图片地址是base64, 但是引入后图片依然不显示

问题 : 经过以上处理后,打包 img.src正常为base64, 但图片依然不显示
解决 : 注释掉file-loader, 只引用url-loader, 完美解决!!!
(试过删除url-loader, 保留file-loader, 图片地址是staic/img/xxx.png, 那么是不是说明图片我放回原来的components/assets/pic 也可以呢?? 待验证~~)