webpack + vue ，运行时图片出现[object Module]

使用webpack作为打包工具，自己搭建项目会遇到奇奇怪怪的问题，前端更新迭代太快，有点插件更新太快webpack的版本不支持，也有其他问题。
遇到的问题：

webpack 配置vue添加图片的时候 使用了file-loader 插件配置 也实验了url-loader
效果如上图，奇葩问题

 {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 2048, //s 2048以内的文件我们打包到js里面去
            name: 'images/[hash:8].[hash:16].[ext]'  // 2048之外到图拍呢我们放到目录下不打包
          },
        }
      }

后来经过百度一查当 file-loader 的版本是 4.3.0 及以上，esModule 默认为true 改为false就好了

{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            esModule: false,
            limit: 2048, //s 2048以内的文件我们打包到js里面去
            name: 'images/[hash:8].[hash:16].[ext]'  // 2048之外到图拍呢我们放到目录下不打包
          },
        }
      }```

之前一直用cli来完成项目，现在自己想使用webpack 搭建下项目，发现坑好多，纪录这些坑，希望后面自己想学习搭建项目的小伙伴搭建过程中遇到这种问题，会给予你的帮助。。