1.目的
主要是为了自动引入打包后的js与css资源，避免手动引入
2.安装相关包
npm install --save-dev html-webpack-plugin3.引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');4.添加插件（通过new方法调用）
/**插件 */
plugins: [
//plugin配置
new ESLintPlugin({
/** 检测哪些文件 */
context: path.resolve(__dirname, 'src')
}),
new HtmlWebpackPlugin()
],进行打包可以看到打包后的文件夹中多了html文件
并且自动引入了dist.js
5.配置插件（是打包后的html文件有一个指定的模版）
new HtmlWebpackPlugin({
/**模板 */
template: path.resolve(__dirname, 'src/public/index.html')
})可以看到打包后的html文件既保留了模版的结构又自动引入了js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script defer src="static/js/dist.js"></script></head>
<body>
<h1>hell webpack</h1>
<!-- <div class="red"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div> -->
<span class="iconfont icon-tianjia"></span>
<!-- -->
<!-- <script src="../../dist/static/js/dist.js"></script> -->
</body>
</html>