详解html-webpack-plugin用法全解


Posted in Javascript onJanuary 22, 2018

html-webpack-plugin 可能用过的 webpack 的童鞋都用过这个 plugin ,就算没用过可能也听过。我们在学习webpack的时候,可能经常会看到这样的一段代码。

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

之后在终端输入 webpack 命令后

webpack

你会神奇的看到在你的 build 文件夹会生成一个 index.html 文件和一个 bundle.js 文件,而且 index.html 文件中自动引用 webpack 生成的 bundle.js 文件。

所有的这些都是 html-webpack-plugin 的功劳。它会自动帮你生成一个 html 文件,并且引用相关的 assets 文件(如 css, js)。

自己在六月第一次接触前端自动化构建,学习 webpack 和 react 时,曾经简单使用过这个插件,但也只是用了常见的几个选项,今天就跟着官方文档走一走,看看它的所有用法。

title

顾名思义,设置生成的 html 文件的标题。

filename

也没什么说的,生成 html 文件的文件名。默认为 index.html.

template

根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader, 否则webpack不能正确解析。以 jade 为例。

npm install jade-loader --save-dev
// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

最终在build文件夹内会生成一个 yourfile.html 和 bundle.js 文件。现在我们再回头来看看之前将的 title 属性。

如果你既指定了 template 选项,又指定了 title 选项,那么webpack 会选择哪一个? 事实上,这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。

那么 filename 呢,是否也会覆盖,其实不是,会以指定的 filename 作为文件名。

inject

注入选项。有四个选项值 true, body, head, false.

  1. true:默认值,script标签位于html文件的 body 底部
  2. body:同 true
  3. head:script 标签位于 head 标签内
  4. false:不插入生成的 js 文件,只是单纯的生成一个 html 文件
  5. favicon:给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。
// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

生成的 html 标签中会包含这样一个 link 标签

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

同 title 和 filename 一样,如果在模板文件指定了 favicon,会忽略该属性。

minify

minify 的作用是对 html 文件进行压缩,minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。来看看这个压缩选项。

html-webpack-plugin 内部集成了html-minifier ,这个压缩选项同 html-minify 的压缩选项完全一样,
看一个简单的例子。

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]
<!-- 原html片段 -->
<div id="example" class="example">test minify</div>
<!-- 生成的html片段 -->
<div id=example class=example>test minify</div>

hash

hash选项的作用是 给生成的 js 文件一个独特的 hash 值,该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。同样看一个例子。

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

执行 webpack 命令后,你会看到你的生成的 html 文件的 script 标签内引用的 js 文件,是不是有点变化了。

bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

默认值是 true。表示只有在内容变化时才生成一个新的文件。

showErrors

showErrors 的作用是,如果 webpack 编译出现错误,webpack会将错误信息包裹在一个 pre 标签内,属性的默认值为 true ,也就是显示错误信息。

chunks

chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。

chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件。

看一个小例子。

// webpack.config.js
entry: {
  index: path.resolve(__dirname, './src/index.js'),
  index1: path.resolve(__dirname, './src/index1.js'),
  index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: ['index','index2']
  })
]

执行 webpack 命令之后,你会看到生成的 index.html 文件中,只引用了 index.js 和 index2.js

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

而如果没有指定 chunks 选项,默认会全部引用。

excludeChunks

弄懂了 chunks 之后,excludeChunks 选项也就好理解了,跟 chunks 是相反的,排除掉某些 js 文件。 比如上面的例子,其实等价于下面这一行

...
excludeChunks: ['index1.js']

chunksSortMode

这个选项决定了 script 标签的引用顺序。默认有四个选项,'none', 'auto', 'dependency', '{function}'。

  1. 'dependency' 不用说,按照不同文件的依赖关系来排序。
  2. 'auto' 默认值,插件的内置的排序方式,具体顺序这里我也不太清楚...
  3. 'none' 无序? 不太清楚...
  4. {function} 提供一个函数?但是函数的参数又是什么? 不太清楚...

如果有使用过这个选项或者知道其具体含义的同学,还请告知一下。。。

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

总结

以上,就总结完了传入 new HtmlWebpackPlugin() 的选项,了解全部选项的含义后,可以在项目构建时更灵活的使用。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
js构造函数创建对象是否加new问题
Jan 22 #Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 #Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 #Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
You might like
PHP5常用函数列表(分享)
2013/06/07 PHP
php+highchats生成动态统计图
2014/05/21 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
JavaScript中的事件处理
2008/01/16 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python多进程并发demo实例解析
2019/12/13 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
人力资源经理自我评价
2014/01/04 职场文书
区级文明单位申报材料
2014/05/15 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
幼儿园教师求职信
2015/03/20 职场文书
离婚被告答辩状
2015/05/22 职场文书