3、html-webpack-plugin

用途：将打包后的文件塞到HTML中，并且可以帮我们把结果输出到我们想要的位置上去（其实这个位置取决于 devServer 中 contentBase）

功能： 默认会创建一个空的HTML文件，自动引入打包输出的所有资源（JS/CSS）。

需求：在输出的html文件中需要由结构的HTML文件，那么就需要在插件中写入 template 属性，相当于复制 template 属性值所指的 html 文件，并自动引入打包输出的所有资源（JS/CSS）。

步骤：

1、安装html-webpack-plugin (注意：看自己安装的webpack是什么版本，插件也要安装对应的版本)

     命令：npm install html-webpack-plugin -D || npm i html-webpack-plugin -D

2、在 webpack.config.js 中写入如下代码

    1）引入： const HtmlWebpackPlugin = require('html-webpack-plugin');

    2)   在 modulex.exports = {

                plugins: [

                    new HtmlWebpackPlugin({

                        template: './src/index.html',

                        fileName: 'index.html',

                        hash: true

                    })

                ]

            }

    注解： template: 是引入的html文件 

                fileName： 最后生成的文件名称   

                hash: 在HTML注入的src路径下会有hash值，代表其唯一 

                minify: {去掉html文件中说的双引号，将代码压缩成一行

注意版本问题：webpack-dev-server 与 webpack-cli 版本问题，一定的小心！！！

npm（html-webpack-plugin）传送门：https://www.npmjs.com/package/html-webpack-plugin

就这样子，欢迎指正~