益阳网站建设益阳山网站建设
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>