webpack07—— html页面自动生成打包的filename值

经过学习entry 和webpack 占位符的学习后

entry：https://blog.csdn.net/assassin_0302/article/details/85161729

webpack 占位符：https://blog.csdn.net/assassin_0302/article/details/85163086

 

 

项目中的html 里有引用一个写死的bundle.js ，但是呢，我们通过占位符打包之后的js 它是不固定的！ 那我们要怎么办，怎么引用呢？？？

此时，就需要借用webpack 插件来解决这个问题了

该插件是： html-webpack-plugin

 

首先，安装该插件  npm install html-webpack-plugin --save--dev

然后使用： 

官方文档：https://www.webpackjs.com/configuration/plugins/

plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件，

可以通过 webpack.[plugin-name] 访问这些插件。

1.在config文件中引用该插件

2.与配置结合起来：

打包！！

结果：在生成的打包目录中，出现一个html页面，该页面的js引用就是entry的入口js

但素！！！！当我们改动原html页面时，发现生成的html页面并没有相应的改变，这是一个空的html结构

原html页面

打包生成的html

 

对比可知，并没有div元素，这两个文件之间并没有任何的联系。

那么，我们就要让src下的index页面为模板生成dist下的html页面

此时，我们就要在刚刚添加的插件中增加一个模板就好

 

结果：