webpack插件之html-webpack-plugin
官方文档：https://www.npmjs.com/package/html-webpack-plugin
html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体，即一个HTML模板，里面通过script标签引用打包后的JS。
下面来看一下基本配置：
const Path = reqiure('path)
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: Path.resolve(__dirname, '/dist')
filename: 'bundle.js'
},
plugins: [
// 所有的插件都是对象，需要new出来
new HtmlWebpackPlugin()
// 上面是一个0配置的html-webpack-plugin插件对象
]
}
上面只是单纯的创建了一个插件对象，并没有做其他配置，所以默认产生的HTML模板是这样的：
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
当然，毕竟该插件是提供一个承载JS的模板，如果你对它的默认模板不满意，那么你完全可以自定义一个模板，下面来看一下它常见的配置项。
Options：
1. title：配置模板的标题
2. filename：配置模板的文件名
3. template：指定模板文件的路径（这里是选择一个你自定义的html文件作为模板）
5. hash：给模板中包含的所有css和js文件设置一个唯一的hash字符串插入到文件名中
6. inject：该属性决定了脚本文件插入的位置。值可以是字符串也可以是布尔值，默认为true，字符串值可以为‘head’（插入到head标签）和‘body’（插入到body底部）
7. minify：压缩HTML，默认为true，值也可以为对象
本文只是先简单介绍了下html-webpack-plugin插件的各个常用配置，因本人水平有限，不做过多深入讲解，日后遇到问题，及时更新。
webpack插件之html-webpack-plugin的更多相关文章
- 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案，webpack4插件新写法
最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...
- 从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的加 ...
- 探寻 webpack 插件机制
webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...
- 编写webpack 插件
Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...
- 80行代码教你写一个Webpack插件并发布到npm
1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...
- 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin
背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...
- webpack 插件拾趣 (1) —— webpack-dev-server
结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...
- webpack 插件库
webpack常用的插件安装命令 webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:np ...
随机推荐
- ipv6地址在URL中的表达方式，如何在URL地址中包含ipv6地址
摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的IE,Mozilla和Lynx等几个已经被广泛安装使用的浏览器的IPv6版本中,这种格式已经被使用.并 ...
- python时间的获取
一.获取当前时间 import datetime # 2019-7-9 print(datetime.datetime.now().year) # 2019 print(datetime.dateti ...
- Mysql --09 Innodb核心特性——事务
目录 Innodb核心特性--事务 1.什么是事务 2.事务的通俗理解 3.事务ACID特性 4.事务流程举例 5.事务的控制语句 6.事务隐式提交情况 7.事务日志redo基本功能 8.redo数据 ...
- mongodb 索引基础
一 .索引基础: MongoDB的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的优化技巧.下面是创建索引的命令: > db.test.ensureIndex({&quo ...
- bzoj1495 [NOI2006]网络收费 复杂度分析+树上背包
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1495 题解 通过观察可以发现,对于一个 \(lca\),如果 \(nA \leq nB\),那 ...
- ARC062F AtCoDeerくんとグラフ色塗り / Painting Graphs with AtCoDeer Burnside 引理
题目传送门 https://atcoder.jp/contests/arc062/tasks/arc062_d 题解 首先对整张图做 Tarjan 点双. 对于一个点双,如果是由一条边构成的,那么很显 ...
- PLSQL连接oracle12c
一.本人以前都是使用oracle10g客户端,PLSQL连接oracle12c时报错 确认配置完全没问题,纠结了不少时间.后来查的是oracle客户端太老了,版本11.2.0.2.0以上即可 二.下载 ...
- springboot实战（汪云飞）学习-1-2
java EE开发的颠覆者 spring boot 实战 随书学习-1 接上一篇,Java配置的学习(还是上一篇的项目中,添加新的包和代码): java配置是spring4.x推荐的配置方式,可以完全 ...
- Vue-Router原理
Hash 与 History 路由原理 实现路由 /** * 1.前端路由与后端路由的区别 后端路由: 输入url => 请求发送到服务器 => 服务器解析请求路径 => 拿到对应页 ...
- 1-什么是 Prometheus
什么是 Prometheus Prometheus 是由 SoundCloud 开源监控告警解决方案,从 2012 年开始编写代码,再到 2015 年 github 上开源以来,已经吸引了 9k+ 关 ...