webpack编译后的html中图片路径变为[object Module]的原因及解决办法

问题缘由

在html模板页面中我们有时候要直接插入图片img。如果直接写绝对路径例如<img src="https://static.yidongtimes.com/dist/mobile/v2/img/notice/fishingTips/waiting.png" alt="">，页面可以访问到图片但是图片不经过webpack处理（压缩，添加哈希后缀等）。这样操作图片也不能作为资源一起编译处理到dist文件夹中。因此需要找到更好的解决办法

提出问题

html中如何正确的引入图片供webpack编译？

解决办法

方法一：
采用以下方式引入图片

<img src="${require('../../../../../../static_audio/src/mobile/v2/img/notice/fishingTips/waiting.png')}" alt="">

这样引入的图片可经过file-loader处理
方法二：
采用以下方式引入图片

<img src="../../../../../../static_audio/src/mobile/v2/img/notice/fishingTips/waiting.png" alt="">

使用html-loader和file-loader处理

rules: [{
        test: /\.(html)$/,
        use: {
            loader: 'html-loader',
            options: {
                attrs: ['img:src'],
            }
        }
    },
    {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: "assets/",   //输出图片放置的位置
                publicPath: './asserts', //html的img标签src所指向图片的位置，与outputPath一致
            }
        }]
    }
]

这里由于我们在项目中用的是ejs模板，我们采取第一种方法

发现问题

按照上面的写法引入图片之后发现图片变成了<img src="[object Module]" alt="">,在stackoverflow中查找资料发现原来是file-loader版本过高导致的，esModule选项已在4.3.0版本的文件加载器中引入，而在5.0.0版本中，默认情况下已将其设置为true。问题地址When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'

解决方法一

安装4.3.0以下版本的file-loader,这里我安装的是4.2.0

yarn add file-loader@4.2.0 --dev

解决方法二

使用4.3.0以上版本的file-loader,需设置esModule: false

{
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
}

参考资料
webpack踩坑记录
When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'