webpack打包2之配置自动生成html ——html-webpack-plugin插件

上一篇文章中实现隔行变色，在index.html中手动引入打包后资源，是有缺点的（比如：webpack配置中输出的打包文件名称修改了，需要及时去index.html中同步修改）
避免以上情况，我们可以使用html-webpack-plugin插件
1、下载安装

yarn add html-webpack-plugin -D 
-D 将依赖记录成开发依赖，只在开发阶段用，实际上线不需要的

2、引入，在webpack.config.js文件中，引入这个插件

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

3、配置说明

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};