HtmlWebpackPlugin是一个出现频率比较高的webpack插件，本文对其作用和配置作一番比较详细的分析（本文的配置均在webpack.config.js中进行）。
为何使用它
简单来说，HtmlWebpackPlugin是用于生成html文件。我们的疑问可能在于，webpack本身不能生成html文件吗？事实上，默认的webpack主要是用于处理js文件的依赖图构建和打包，当需要生成html文件时，便需要使HtmlWebpackPlugin插件。
如何安装
作为开发依赖安装即可：
npm install --save-dev html-webpack-plugin
如何在webpack.config.js中配置该插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [new HtmlWebpackPlugin()]
};
以上配置中，首先使用了require引入插件，首字母开头表明是一个构造函数，而后使用new语句创建一个实例，并将其作为webpackConfig的plugins选项的一个数组成员，这样表示webpack打包时将使用HtmlWebpackPlugin插件。
这里没有做HtmlWebpackPlugin的任何额外配置，实际上它的默认配置将会生效。
默认配置是如何工作的
在以上配置中，HtmlWebpackPlugin就已经会生效，只不过是应用的默认配置。默认配置如下：
- 默认配置会在
出口目录中（通过output.path选项配置）生成一个index.html文件； - 生成的index.html文件将会以script标签的形式引入每一个输出js文件（
通过output.filename选项配置）。
现在我们把其他基本配置补充完整：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
entry:{
app:path.resolve(__dirname,'./index.js'),
test:path.resolve(__dirname,'./test.js')
},
output:{
path: path.resolve(__dirname,'./dist'),
filename:'[name]_bundle.js'
},
plugins:[new HtmlWebpackPlugin()]
}
以上配置中，先抛开HtmlWebpackPlugin来分析打包结果：由于项目中存在两个入口，出口（输出文件）使用了占位符，因此结果是在dist目录下生成两个js文件即app_bundle.js和test_bundle.js两个文件。
根据上面所述的默认配置，那么除此之外，还会在dist目录下生成一个index.html文件，它以script标签的形式引入app_bundle.js和test_bundle.js，即：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="app_bundle.js"></script>
<script type="text/javascript" src="test_bundle.js"></script>
</body>
</html>
修改默认配置
假如想要修改默认配置，只需要在在实例化HtmlWebpackPlugin的对象时，传入一个配置对象即可，如：
const htmlPlugin = new HtmlWebpackPlugin({
template:path.join(__dirname,'./public/index.html'),
filename: 'index.html'
});
module.exports = {
...
plugins: [new HtmlWebpackPlugin()]
};
常见应用：在内存中生成index.html文件
以上案例中，我们实现了生成物理的index.html文件，即在项目的dist目录下，是可以看见index.html的。有另外一种常见情况，即我们需要在内存中生成index.html文件，这时内存中的index.html中是在资源管理器中看不到的。我们何时会有这样的奇怪需求呢？
试想这样的应用场景：
我们的项目中需要实时预览效果，需要启动一个本地服务器，例如需要通过
http://localhost:8080这样的方式访问index.html文件。显然我们对项目做的每一个更改，webpack都会重新打包，并反映到index.html文件中去。
这听起来是完全可行的，问题在于：
- webpack打包时读写
磁盘去生成目标文件，由于物理磁盘读写速度非常有限，很可能导致预览滞后。
因此我们可以生成一个内存中的index.html文件用于浏览器实时预览，由于内存读写速度明显快于物理磁盘，因此实时预览也更加及时。
如何实现呢？
- 我们只需要安装webpack-dev-server，并启动一个服务即可。这时HtmlWebpackPlugin将
在内存中生成html文件，而不是在出口目录中。 - 使用 webpack-dev-server后，
出口目录中的js文件同时会在内存中生成，并被内存中的index.html文件引入。
限于篇幅，这里不再赘述webpack-dev-server的作用机制及配置方法。