3-1 webpack4插件-根据HTML模版自动生成HTML

最新推荐文章于 2024-07-20 19:48:15 发布

xt_123456

最新推荐文章于 2024-07-20 19:48:15 发布

阅读量201

点赞数

分类专栏： webpack学习文章标签： webpack

本文链接：https://blog.csdn.net/xt_123456/article/details/106121281

版权

webpack学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

想要根据HTML模版自动生成HTML，就需要使用一个插件：html-webpack-plugin
html-webpack-plugin会为你自动生成一个html文件，根据指定的index.html模版生成对应的html文件。
比如：根据src下的index.html文件自动在打包后的目录下生成webpack.html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html文件里，如下图所示：
在这里插入图片描述

具体步骤：

1.安装依赖
打开终端，进入到项目文件夹路径，输入命令cnpm install html-webpack-plugin --save-dev
2.配置webpack.config.js文件
首先需要引入html-webpack-plugin插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

在module.exports = {}里写配置：

plugins:[
		new HtmlWebpackPlugin({
			template:"./public/index.html",
			filename:"webpack.html"
		})
	]

3.在终端输入npm run dev进行打包。
这时就会在出口指定的文件夹下出现webpack.html文件。
配置文件中还可以写入minify进一步进行配置，代码如下：

plugins:[
		new HtmlWebpackPlugin({
			template:"./public/index.html",
			filename:"webpack.html",
			minify:{
				minimize:true,//是否打包为最小值
				removeAttributeQuotes:true,//去除引号
				removeComments:true,//去除注释
				collapseWhitespace:true,//去除空格
				minifyCSS:true,//压缩html内的样式
				minifyJS:true,//压缩html内的js
				removeEmptyElements:true,//清理内容为空的元素
			},
			hash:true//引入产出资源的时候加上哈希避免缓存
		})
	]

举个例子，加入这个配置之后再打包，打包前的html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				display: inline;
				background: red;
			}
		</style>
	</head>
	<body>
		<h1></h1>
		<div></div>
		<!-- 生成html -->
		<div class="box">111</div>
		<script type="text/javascript">
			var a = 1;
			console.log(a);
		</script>
	</body>
</html>

打包后的html文件：

<!DOCTYPE html><html><head><meta charset=utf-8><style type=text/css>.box{display:inline;background:red}</style></head><body><div class=box>111</div><script type=text/javascript>var a=1;console.log(a)</script><script src=bundle.js?c8560c7c16ad8d54689e></script></body></html>