实例讲解webpack的基本使用第三篇

这一篇来说解一下webpack的htmlWebpackHtml插件的使用。

先来思考一个实际问题：咱们如今在index.html引用的js文件是写死的。可是咱们每次打包后的文件都是动态的，那么咱们怎么让他们结合起来呢？

这就要借助htmlWebpackPlugin插件了。

1.先安装html-webpack-plugin插件。

执行：npm install html-webpack-plugin --save-dev。

2.在webpack.config.js文件中require这个插件模块

3.在webpack.config.js文件中添加一个plugins配置项：

每一项参数的具体做用请查看上面代码的注释部分。

4.下面来演示一遍。

看下具体的每个参数是怎么使用的。

咱们创建在根目录下创建一个index.html文件。

加上以下代码输出htmlwebpackPlugin这个对象的属性。

 

打包之生成的结果为：file 和options。发现有两个属性。

而后在分别将这两个属性打印出来看里面有什么东西。

打包以后页面生成的结果为：

 全部的属性咱们都一目了然了。

接下来要用什么属性，只要去调用就行了。

如调用title：

 

前台输出的为：

 

调用对应的js引用：

 

前台输出的为：

调用options里面的时间：

前台输出为：

单文件html打包基本上就差很少了。

下面继续讲解如何打包生成多文件：

需求：我须要利用一个模板生成三个不一样的文件，每一个文件调用对应的js文件，拥有对应的title，而且三个文件拥有拥有共同的js。

在webpack.config.js文件添加以下配置。

具体参数的功能看请看注释

而后创建一个tem.html文件：

打包以后就实现了咱们上面的需求。

具体实现，请下载源代码。