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

·  阅读 526

使用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的路径问题。

分类:
前端
标签:
分类:
前端
标签: