前端打包工具webpack4----4----第五章

最新推荐文章于 2022-12-24 00:30:00 发布

nzch

最新推荐文章于 2022-12-24 00:30:00 发布

阅读量64

点赞数

分类专栏： webpack4 XXD

本文链接：https://blog.csdn.net/qq_28764557/article/details/102574368

版权

XXD 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

webpack4

5 篇文章 0 订阅

订阅专栏

webpack处理HTML内嵌图片

http://localhost:8080/webpack.html

未使用loader的时候：

这样是显示不出来的。

1.下载安装：

cnpm install --save-dev html-loader

2.Rulre配置

,
			{
				test:/\.(html)$/,
				use:{
					loader:'html-loader',
					options:{
						attrs:['img:src','img:data-src']
					}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.aa {
			display: flex;
			background: red;
		}
	</style>
</head>
<body>
	<h1></h1>
	<img src="timg.jpg" alt="" data-src="timg.jpg"/>
	<div class="aa">111111</div>
	<script type="text/javascript">
		var a = 10;
		console.log(a);
	</script>
</body>
</html>

-------------5-1----------------

调试：