require引入的图片地址被解析为[object Module]

问题描述：

const pic = require('./imgs/pic.jpg');

按照以上的写法引入图片之后发现图片变成了<img src="[object Module]" alt="">

原因： 由file-loader版本过高引发的兼容问题，esModule选项已在4.3.0版本的文件加载器中引入，而在5.0.0版本中，默认情况下已将其设置为true。

解决方案一：

const pic = require('./imgs/pic.jpg').default;

解决方案二：

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