这一篇来讲解一下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文件:

打包之后就实现了我们上面的需求。

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

实例讲解webpack的基本使用第三篇的更多相关文章

  1. 实例讲解webpack的基本使用第四篇

    这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. ...

  2. 实例讲解webpack的基本使用第二篇

    这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dis ...

  3. 实例讲解webpack的基本使用第一篇

    更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...

  4. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  5. S3C2440上RTC时钟驱动开发实例讲解(转载)

    嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...

  6. 基于tcpdump实例讲解TCP/IP协议

    前言 虽然网络编程的socket大家很多都会操作,但是很多还是不熟悉socket编程中,底层TCP/IP协议的交互过程,本文会一个简单的客户端程序和服务端程序的交互过程,使用tcpdump抓包,实例讲 ...

  7. makefile基础实例讲解 分类: C/C++ 2015-03-16 10:11 66人阅读 评论(0) 收藏

    一.makefile简介 定义:makefile定义了软件开发过程中,项目工程编译链.接接的方法和规则. 产生:由IDE自动生成或者开发者手动书写. 作用:Unix(MAC OS.Solars)和Li ...

  8. Html代码seo优化最佳布局实例讲解

    搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...

  9. 【MySQL】分页查询实例讲解

    MySQL分页查询实例讲解 1. 前言 本文描述了团队在工作中遇到的一个MySQL分页查询问题,顺带讲解相关知识点,为后来者鉴.本文的重点不是"怎样"优化表结构和SQL语句,而是探 ...

随机推荐

  1. summernote使用心得

    今日因项目需要所以使用了很有名气的富文本编辑器summernote,分享使用方法如下!填了一点坑,提供给需要的朋友借鉴! 直接转入我的前端网 地址: http://www.qdfuns.com/not ...

  2. python2.x与3.x的主要区别笔记

    #coding:utf-8 ''' python3.x新的东西 目录 使用__future__模块 print函数 整数除法 Unicode xrange 触发异常 处理异常 next()函数和.ne ...

  3. JS中的循环结构

    [循环结构的执行步骤]1.声明循环变量:2.判断循环条件3.执行循环体操作4.更新循环变量然后循环执行2-4,直到条件不成立时,跳出循环.while循环()中的表达式,运算结果可以是各种类型,但是最终 ...

  4. 论述Redis和Memcached的差异

    原文 https://yq.aliyun.com/articles/60981?utm_campaign=wenzhang&utm_medium=article&utm_source= ...

  5. 微信小程序实例--仿豆瓣电影

    最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...

  6. [js高手之路]node js系列课程-图解express+supervisor+ejs用法

    上文通过node js自带的http模块搭建了一个简易的服务器,实际在开发中,一般用的是express框架,本文我们就来讲讲项目开发中必备不可少的几样东西: 服务器( express ) 路由( ex ...

  7. Maven maven-compiler-plugin版本

    项目执行Maven clean后出现WARNING提示.报如信息如下,根据报错信息 'build.plugins.plugin.version' for org.apache.maven.plugin ...

  8. MySQL(九)之数据表的查询详解(SELECT语法)二

    上一篇讲了比较简单的单表查询以及MySQL的组函数,这一篇给大家分享一点比较难得知识了,关于多表查询,子查询,左连接,外连接等等.希望大家能都得到帮助! 在开始之前因为要多表查询,所以搭建好环境: 1 ...

  9. Maven setting.xml 文件剖析

    全局配置: ${M2_HOME}/conf/settings.xml (配置环境变量  新建 M2_HOME    安装目录到版本名那里(D:\apache-maven-3.0.2) 编辑path 环 ...

  10. js中面向对象的写法

    function Circle(r){ this.r = r; }//构造(实例对象的)函数[思路二:这是一个类] Circle.PI = 3.14159; //属性 Circle.prototype ...