問題描述
Vue官方文檔中說了vue-loader的基本原理清女，他會將Vue模板中的<img src="../image.png">轉(zhuǎn)為下面這段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]">均唉，無法顯示胜茧。
解決方案
這是因?yàn)閒ile-loader默認(rèn)采用ES模塊語法，即import '../image.png'摇展；然而Vue生成的是CommonJS模塊語法洋闽，即require('../image.png')；二者不一致休涤。要么讓file-loader或url-loader采用CommonJS語法咱圆，要么讓Vue采用ES語法。
剛好file-loader或url-loader有一個esModule選項(xiàng)能調(diào)整，將其設(shè)置為false即可：
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024,
esModule: false
}
}
總結(jié)
現(xiàn)在是2020年01月18日序苏，然而目前在Webpack的中文文檔中根本沒提到esModule這個參數(shù)手幢，只有Webpack英文文檔中提到了，大家可以去看看忱详。
所以說盡量還是看英文文檔吧弯菊，英文真的是大多數(shù)從業(yè)者提升技術(shù)的門檻啊。
