关于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 的模式引用文件。
最新文章
- MySQL 体系结构
- 84 tune2fs-调整系统参数
- include与require的区别?
- Oracle监听器启动出错:本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案
- day12---python mysql pymsql sqlalchemy ORM
- 使用Sqoop,最终导入到hive中的数据和原数据库中数据不一致解决办法
- JavaWeb 6 Http
- 【M31】让函数根据一个以上的对象类型来决定如何虚化
- PHP读取xml方法讲解
- 15个易遗忘的Java问题
- 切割TOMCAT日志
- Python运行机制
- 黑马程序猿_try-catch-finally
- (转)iOS Wow体验 - 第二章 - iOS用户体验解析(1)
- Python成长之路第一篇(2)-初识列表和元组
- Mysql--执行计划 Explain
- mysql报错mmap(137428992 bytes) failed; errno 12,Cannot allocate memory for the buffer pool
- HDU1060
- 深入理解 Servelt
- IdentityServer4【QuickStart】之使用ClientCredentials流程保护API
热门文章
- Spring Cloud Feign 出现ClassNotFoundException: feign.Feign$Builder错误
- 多本Web前端深度修炼书籍(提供网盘下载链接)
- Android程序之全国天气预报查询(聚合数据开发)
- POJ 题目2774 Long Long Message(后缀数组,求最长公共子串长度)
- hdoj--2180--时钟(数学)
- HTML5学习笔记(二):用于构建页面的语义元素
- su和sudo的区别与使用,su命令,linux命令
- 22.boost图模板
- vue+Element实现tree树形数据展示
- STM8S103-STVD建立汇编代码项目