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

程序员文章站 2022-04-04 09:59:13

...

webpack处理HTML内嵌图片

http://localhost:8080/webpack.html

未使用loader的时候：

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

这样是显示不出来的。

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----------------

调试：

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