webpack学习笔记（四）：关于html插件

在之前学习webpack时，我们都是在src目录下创建index.html文件，然后在html文件中引入打包后的js文件，如果在某种情况下我们把输出文件的名称由bundle.js改成bundle_1.js，那么就需要同步更改index.html中引入的js文件名称：

有什么办法可以不用去关注输出文件的名称，而是可以让index.html自动引入呢？下面介绍一下html-webpack-plugin这个插件。

• 首先，安装html-webpack-plugin插件
  
• 在配置文件中引入该插件，并且改变一下输出文件的名称。plugins里面的配置表示以src目录下的index.html文件为模板生成一个html文件用于访问，并把文件名设置为index.html

src目录下的index.html如下：
  
  打包后，打开浏览器访问到index.html，并且查看源代码：
  
  可以看到引入了两个js文件，其中bundle.js是我们自己引入的，而bundle_1.js是打包后自动引入的，当我们把输出文件名改为bundle_2.js时，打包后再查看源代码：
  
  因此我们知道了，我们并不用自己引入打包后的js文件，有了html-webpack-plugin这个插件后可以指定以哪个html文件作为模板，打包后的js文件可以自动添加到html模板文件中。

本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。