踩坑img src="[object Module]"

为了快速测试自己开发的某个插件功能，我通常都是用webpack快速搭建一个vue项目，这样可以保证没有其他未知因素地干扰。这次也同往常一样顺利，直到，我的插件需要内置一张图片。。。

问题

图片没有出来，查看控制台，img标签的src属性变成了"[object Module]"。图片并没有按照预期编译返回url字符串，而是一个模块对象。

分析

我就奇怪了，以前都是这么配置的，从没出过问题。

冷静思考，其实有一点不一样，那就是新安装的依赖插件版本可能比以前的高。而且既然是图片打包的问题，那就优先排查图片处理插件。

一番操作猛如虎，果然！就是新版本惹的祸！

file-loader 从 5.0 版本开始，将默认输出改成了 esModule 模块！

url-loader 从 3.0 版本开始，将默认输出改成了 esModule 模块！

解决

接下来我手动添加了配置 esModule: false（改成输出commonJS模块）。

{
  test: /\.(png|jpe?g|gif|bmp)$/,
  use: [
    {
      loader: 'url-loader',
      options:{
        limit: 1024 * 8,
 +       esModule: false
      }
    }
  ]
}

问题解决！

总结

遇到打包错误不要慌乱，不要回避问题。用单一变量法进行排除，以及逻辑判断大致定位问题，然后查看插件版本的 BREAKING CHANGES 记录，基本可以找到答案。