1.HtmlWebpackPlugin 插件

这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。

1>利用此插件,我们在webpack打包的时候会在你的 build 文件夹会生成一个 index.html 文件和一个 bundle.js 文件,而且 index.html 文件中自动引用 webpack 生成的 bundle.js 文件。

2>插件参数:

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
})
let conf = {
template: path.resolve(filePath),
filename: process.env.NODE_ENV === 'production' ? '../output/view/' + filepath + '.tpl' : filepath + '.html',
chunks: ['common', 'vendors', filename],
inject: true
}

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'
})
]

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

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

inject

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

  • true

    • 默认值,script标签位于html文件的 body 底部

  • body

    • 同 true

  • head

    • script 标签位于 head 标签内

  • false

    • 不插入生成的 js 文件,只是单纯的生成一个 html 文件

favicon

给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。

  1.  // webpack.config.js
  2.  ...
  3.  plugins: [
  4.  new HtmlWebpackPlugin({
  5.  ...
  6.  favicon: 'path/to/yourfile.ico'
  7.  })
  8.  ]

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

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

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

minify

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

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

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

hash

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

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

执行 webpack 命令后,你会看到你的生成的 html 文件的 script 标签内引用的 js 文件,是不是有点变化了。
bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值。

  1.  $ webpack
  2.  Hash: 22b9692e22e7be37b57e
  3.  Version: webpack 1.13.2

cache

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

showErrors

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

chunks

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

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

看一个小例子。

  1.  // webpack.config.js
  2.  entry: {
  3.  index: path.resolve(__dirname, './src/index.js'),
  4.  index1: path.resolve(__dirname, './src/index1.js'),
  5.  index2: path.resolve(__dirname, './src/index2.js')
  6.  }
  7.  ...
  8.  plugins: [
  9.  new HtmlWebpackPlugin({
  10.  ...
  11.  chunks: ['index','index2']
  12.  })
  13.  ]

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

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

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

excludeChunks

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

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

chunksSortMode

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

  • 'dependency' 不用说,按照不同文件的依赖关系来排序。

  • 'auto' 默认值,插件的内置的排序方式,具体顺序这里我也不太清楚...

  • 'none' 无序? 不太清楚...

  • {function} 提供一个函数?但是函数的参数又是什么? 不太清楚...

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

xhtml

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

关于webpack插件的更多相关文章

  1. webpack 插件拾趣 (1) —— webpack-dev-server

    结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...

  2. 探寻 webpack 插件机制

    webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...

  3. 编写webpack 插件

    Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...

  4. 从0开始编写webpack插件

    1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...

  5. webpack插件之webpack-dev-server

    webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

  6. webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

  7. 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解

    webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...

  8. webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...

  9. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  10. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

随机推荐

  1. Hibernate的xml方法配置和操作代码

    一.gradle中包: compile group: 'org.hibernate', name: 'hibernate-core', version: '5.2.12.Final' compile ...

  2. hdu1213 How Many Tables(并查集)

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. 移动端fixed后 横竖屏切换时上部或下部出现空隙问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. win10+ubuntu的坑

    最近几天考虑了诸多,包括分区大小,使用烧写工具等等. 但是实际动手还是遇到了彩蛋.rufus是知乎的大神推荐的,因为UUI貌似有些版本安装时候有些问题. 而rufus的界面有诸多选项.ubuntu的图 ...

  5. POJ 2386 Lake Counting【BFS】

    题意:给出一个矩形,问有多少块连通的W 当找到W的时候,进行广搜,然后将搜过的W变成点,直到不能再搜,进行下一次广搜,最后搜的次数即为水塘的个数 看的PPT里面讲的是种子填充法. 种子填充算法: 从多 ...

  6. pthread 的 api 分类

    pthreads defines a set of C programming language types, functions and constants. It is implemented w ...

  7. SpringBoot学习笔记(9)----SpringBoot中使用关系型数据库以及事务处理

    在实际的运用开发中,跟数据库之间的交互是必不可少的,SpringBoot也提供了两种跟数据库交互的方式. 1. 使用JdbcTemplate 在SpringBoot中提供了JdbcTemplate模板 ...

  8. 妙用$.extend

    在js中,我们有时需要复制一个对象的值,而不是复制它的引用的时候,可以使用jquery的$.extend方法,简单代码如下 <script> var a = { "name&qu ...

  9. VBA 中Dim含义

    楼主是个初学者,在应用vba时遇到了dim方面的问题,查了很多资料后想把关于dim的这点儿知识简单整理出来 首先,从我遇到的问题作为切入点吧, (不得不承认我遇到的错误是很低级的) 具体的情境就不还原 ...

  10. Java线程之基础

    Java内存模型(jmm) 线程通信 消息传递 重排序 顺序一致性 Happens-Before As-If-Serial 一.线程的生命周期及五种基本状态 线程生命周期:新建.就绪.运行.阻塞.死亡 ...