问题描述
Vue官方文档中说了vue-loader的基本原理，他会将Vue模板中的<img src="../image.png">转为下面这段JS代码：
createElement('img', {
attrs: {
src: require('../image.png') // require()是CommonJS模块语法
}
})
对于图像我们在Webpack中肯定会使用url-loader或file-loader来处理：
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024
}
}
然而这样最后生成的图像会变成<img src="[object Module]">，无法显示。
解决方案
这是因为file-loader默认采用ES模块语法，即import '../image.png'；然而Vue生成的是CommonJS模块语法，即require('../image.png')；二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。
刚好file-loader或url-loader有一个esModule选项能调整，将其设置为false即可：
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024,
esModule: false
}
}
总结
现在是2020年01月18日，然而目前在Webpack的中文文档中根本没提到esModule这个参数，只有Webpack英文文档中提到了，大家可以去看看。
所以说尽量还是看英文文档吧，英文真的是大多数从业者提升技术的门槛啊。
