09 webpack4.0学习笔记——配置文件_HtmlWebpackPlugin使用

概述

之前所有的文章都介绍的是如何打包处理各种文件，但是我们最后生成的都是js文件，这在浏览器中是不能直接运行的，必须包含在HTML文档中才可以正常运行，那本文就介绍下HtmlWebpackPlugin这个插件的使用。

HtmlWebpackPlugin插件主要是用来生成html结果文件的，它会将我们的js结果文件打包包含到最后的一个html文件中，然后我们直接浏览器运行这个html结果文件就可以了。

具体操作流程

1、根据官网所示，我们输入命令“npm install --save-dev html-webpack-plugin”来安装这个插件，如图：

2、此处使用的demo继续使用前面文章中的demo代码。安装完成后，我们在配置文件中引入这个插件，然后在plugin属性字段下实例化这个插件，如下：

3、引入、实例化之后，执行打包，我们可以看到在dist文件夹下生成了html、css和js三份文件，其中css和js是我们前面文章所写的代码生成的，本文不再关注，本文主要关注生成的html结果文件，因为这是通过HtmlWebpackPlugin这个插件生成的。

打开html文件可看到，它将打包生成的css和js文件都自动加载进来了，只要我们在浏览器里打开此html文件，它就可以正常运行，这就是这个插件的基本使用流程。

同时呢，我们可以修改配置文件中的出口配置部分，修改js的打包结果文件名称，然后重新打包，再次打开html发现，它自动加载的js文件名称也随之发生了变化，如图：

附加内容

文章上述部分介绍了此插件的基本使用，并没有做过多的配置，接下来的这部分内容将进一步讲解一下此插件的一些配置使用。

1、根据官网对此插件的配置介绍，我们先配置此插件的title和filename属性字段。

title字段控制生成的html文件中的<title>标签内的值；filename属性字段代表生成的html文件的名称，如下：

2、再次打包，就可以看到生成的是admin.html，打开此文件发现，它的<title>值是我们在配置文件配置的“My App”，如图：

3、上述介绍了配置结果文件的名称及文件中title标签的值，但是在实际开发中我们可能需要额外的js文件包，额外的html元素，所以，这就需要我们提供自己的html文件，然后通过配置，将我们提供的html文件和其他所有文件一起打包，最终再生成一个html结果文件，最后将这个结果文件在浏览器运行即可。接下来简单介绍下操作流程。

4、在配置文件中新增template属性字段，然后指定我们自己的html文件，在这里，我们根据配置文件，在项目根目录下新建了一个test.html文件，如下：

5、然后根据官网实例的写法，在test.html中加入代码，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title><%= htmlWebpackPlugin.options.title %></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div id="test"></div>
	</body>
</html>

由上述代码可看到，在此html中我们引入了jquery的cdn地址，而且此文件的title标签值的写法是参考插件官网的写法，在这里表示使用配置文件中的title这个属性的值，即“My App”，然后我们打包，查看结果文件，发现它不仅包含了我们自己的js文件，也包含了其他打包后的结果文件，同时，title标签值也得到了相应的值，如图：