webpack中处理html中引入的＜img＞图片

url-loader只能处理样式表中引入的图片，而对于在html页面中通过引入的图片，url-loader是无法直接识别的，需要通过html-loader编译引入img，从而使得url-loader能够进一步处理它。

module.exports={

	module: {	
		rules:[
		    {
		    	test: /.\(jpg|png|gif)/,
		    	loader: 'url-loader',
		    	options: {
					limit: 8 * 1024,
					esModule: false  //很重要，否则<img ur="[object Module]">依然无法显示图片
				} 
            },
			{
				test:/.\html$/,
				//处理html中的img图片
				loader:'html-loader'
			}
		]
		}

}

请注意，使用html-loader后，务必将url-loader中esModule这个字段置为false。
因为url-loader默认使用es6模块化进行解析，而html-loader引入图片使用commonjs方式。解析时就会出问题，造成<img url ="[object Module]"/>现象。为解决这个问题，设置esModule: false。