webpack打包后出现 <img src = {"default":"img/01.6b0f10f0.jpg"} />

使用webpack打包之后，发现html中的img的路径是不对的。 我用的插件是html-withimg-loader。

其实，用html-loader，还是html-withimg-loader打包出来之后，img标签的路径都是以一个对象的形式存在。 解决这个问题的方式就是url-loader或者file-loader中的配置没有写全。

代码：

{
	test:/\.html$/,
	use:['html-withimg-loader']
	//use:['html-loader']
}

配置好html的loader之后， 不管你用的是url-loader还是file-loader，都需要写上这一步的配置：

{
	test: /\.(jpe?g|png|gif)$/i, //图片文件
	use: [
	  {
		loader: 'url-loader',
		//include: [path.resolve(__dirname, "../src/static")],
		options: {
		  //将这一配置项设置成false即可
		  esModule: false,
		  limit: 10240,
		  name: 'img/[name].[hash:8].[ext]',
		  //outputPath: 'img/',
		  //publicPath: '../'
		}
	  }
	]
},

只需要将 esModule：false, 再次运行打包的命令，再次打开index.html 发现：

<img src="img/01.6b0f10f0.jpg" />

这样，就改变了img的路径问题。