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]’