官方文档: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文件作为模板)

4. favicon:指定网站图标的路径

5. hash:给模板中包含的所有css和js文件设置一个唯一的hash字符串插入到文件名中

6. inject:该属性决定了脚本文件插入的位置。值可以是字符串也可以是布尔值,默认为true,字符串值可以为‘head’(插入到head标签)和‘body’(插入到body底部)

7. minify:压缩HTML,默认为true,值也可以为对象

本文只是先简单介绍了下html-webpack-plugin插件的各个常用配置,因本人水平有限,不做过多深入讲解,日后遇到问题,及时更新。

webpack插件之html-webpack-plugin的更多相关文章

  1. 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案,webpack4插件新写法

    最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...

  2. 从0开始编写webpack插件

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

  3. webpack插件之webpack-dev-server

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

  4. webpack插件之htmlWebpackPlugin

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

  5. 探寻 webpack 插件机制

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

  6. 编写webpack 插件

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

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

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

  8. 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin

    背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...

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

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

  10. webpack 插件库

    webpack常用的插件安装命令 webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:np ...

随机推荐

  1. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  2. setenv和dos2unix碰到的问题

    两个比较傻的小问题 setenv  ethaddr 00:0a:35:00:01:26 提示只能修改一次,束手无策,难道要改uboot吗 同事提示加上-f setenv -f ethaddr 00:0 ...

  3. 【转】SAP 各种记账凭证的更改&冲销

    一:更改 1,已经过帐的 FB02. 过完帐的允许更改的地方有限,只有凭证抬头文本,参照,分配,文本,原因代码等 2,预制凭证的更改. FBV2. 预制凭证可以更改的地方很多,只有凭证编码+公司代码+ ...

  4. 洛咕P4180 严格次小生成树

    鸽了很久的一道题(?)貌似是去年NOIP前听的emm... 首先我们分析一下最小生成树的性质 我们kruskal建树的时候呢是从小到大贪心加的边,这个的证明用到拟阵.(我太菜了不会) 首先我们不存在连 ...

  5. grep正则表达式(二)

    任意字符(The Any Character) dot or period character: "." grep -h '.zip' dirlist*.txt ".&q ...

  6. yield关键字详解与三种用法

    本篇文章比较硬核, 适合有一定Python基础的读者阅读, 如果您对Python还不甚了解可以先关注我哦, 我会持续更新Python技术文章 yield详解 yield与return相同每次调用都会返 ...

  7. iOS项目开发中的知识点与问题收集整理①

    前言部分 注:本文并非绝对原创 大部分内容摘自 http://blog.csdn.net/hengshujiyi/article/details/20943045 文中有些方法可能已过时并不适用于现在 ...

  8. Codeforces 803E--Roma and Poker (DP)

    原题链接:http://codeforces.com/problemset/problem/803/E 题意:给一个n长度的字符串,其中'?'可以替换成'D'.'W'.'L'中的任意一种,'D'等价于 ...

  9. 企业资源计划(ERP)

    ERP(企业资源计划)一般指企业资源计划(ERP) 物资资源管理(物流).人力资源管理(人流).财务资源管理(财流).信息资源管理(信息流) 信息技术在企业管理学上的应用可分做如下发展阶段:A. MI ...

  10. socket | tcp客户端 tcp服务器 udp客户端 udp 服务器 创建方法

    tcp服务器 #coding=utf-8 ''' 这里是tcp服务器端,要先启动 ''' import socket import threading bind_ip = "0.0.0.0& ...