webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25

一、作用：htmlWebpackPlugin插件会在webpack打包结束后，自动帮我们生成一个HTML文件，并把打包生成的js自动引入到这个HTML文件中；

二、安装 ：npm install html-webpack-plugin -D

三、配置：

1、首先，我们要在webpack的配置文件中引入HtmlWebpackPlugin插件：

const HtmlWebpackPlugin = require('html-webpack-plugin')

2、在webpack配置项中，新增一个plugins节点，然后new一个HtmlWebpackPlugin的实例；

plugins:[new HtmlWebpackPlugin()]

3、当我们打包生成HTML文件的时候，这个HTML文件中只有webpack帮我们自动生成的script标签，并引入了打包生成的js文件；

4、如何生成一个我们想要的HTML文件：

我们可以自定义一个HTML文件模板，在webpack的配置文件中创建HTMLWebpackPlugin时，将这个模板传入；

四、什么是webpack的plugin(插件)

答：webpack的插件，是在webpack运行到某个时刻的时候，帮我们做一些事情的东西；有点类似与Vue或者react的生命周期函数；