关于webpack插件
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 文件所在的路径名。
- // webpack.config.js
- ...
- plugins: [
- new HtmlWebpackPlugin({
- ...
- favicon: 'path/to/yourfile.ico'
- })
- ]
生成的 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 的压缩选项完全一样,
看一个简单的例子。
- // 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}'。
'dependency' 不用说,按照不同文件的依赖关系来排序。
'auto' 默认值,插件的内置的排序方式,具体顺序这里我也不太清楚...
'none' 无序? 不太清楚...
{function} 提供一个函数?但是函数的参数又是什么? 不太清楚...
如果有使用过这个选项或者知道其具体含义的同学,还请告知一下。。。
xhtml
一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。
关于webpack插件的更多相关文章
- webpack 插件拾趣 (1) —— webpack-dev-server
结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...
- 探寻 webpack 插件机制
webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...
- 编写webpack 插件
Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...
- 从0开始编写webpack插件
1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...
- webpack插件之webpack-dev-server
webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server 现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...
- webpack插件之htmlWebpackPlugin
webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...
- 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解
webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...
- webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它
HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...
- 80行代码教你写一个Webpack插件并发布到npm
1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
随机推荐
- Hibernate的xml方法配置和操作代码
一.gradle中包: compile group: 'org.hibernate', name: 'hibernate-core', version: '5.2.12.Final' compile ...
- hdu1213 How Many Tables(并查集)
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 移动端fixed后 横竖屏切换时上部或下部出现空隙问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- win10+ubuntu的坑
最近几天考虑了诸多,包括分区大小,使用烧写工具等等. 但是实际动手还是遇到了彩蛋.rufus是知乎的大神推荐的,因为UUI貌似有些版本安装时候有些问题. 而rufus的界面有诸多选项.ubuntu的图 ...
- POJ 2386 Lake Counting【BFS】
题意:给出一个矩形,问有多少块连通的W 当找到W的时候,进行广搜,然后将搜过的W变成点,直到不能再搜,进行下一次广搜,最后搜的次数即为水塘的个数 看的PPT里面讲的是种子填充法. 种子填充算法: 从多 ...
- pthread 的 api 分类
pthreads defines a set of C programming language types, functions and constants. It is implemented w ...
- SpringBoot学习笔记(9)----SpringBoot中使用关系型数据库以及事务处理
在实际的运用开发中,跟数据库之间的交互是必不可少的,SpringBoot也提供了两种跟数据库交互的方式. 1. 使用JdbcTemplate 在SpringBoot中提供了JdbcTemplate模板 ...
- 妙用$.extend
在js中,我们有时需要复制一个对象的值,而不是复制它的引用的时候,可以使用jquery的$.extend方法,简单代码如下 <script> var a = { "name&qu ...
- VBA 中Dim含义
楼主是个初学者,在应用vba时遇到了dim方面的问题,查了很多资料后想把关于dim的这点儿知识简单整理出来 首先,从我遇到的问题作为切入点吧, (不得不承认我遇到的错误是很低级的) 具体的情境就不还原 ...
- Java线程之基础
Java内存模型(jmm) 线程通信 消息传递 重排序 顺序一致性 Happens-Before As-If-Serial 一.线程的生命周期及五种基本状态 线程生命周期:新建.就绪.运行.阻塞.死亡 ...