webpack入门（六）——html-webpack-plugin
html-webpack-plugin
该插件可以简化创建调用webpack bundles的html文件。在每次编译后，文件名会包含有hash值的bundles 特别有用。你可以让插件为您生成一个HTML文件，也可以提供您自己使用lodash模板的模板，或使用您自己的装载机。
维护者：Jan Nicklas @jantimon。
安装
用npm安装这个插件
$ npm install html-webpack-plugin --save-dev- 1
基本配置
该插件将为您生成一个HTML5文件，这个文件用script标签引用所有的webpack包。只需将插件添加到您的webpack配置，如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这样就会生成一个文件 dist/index.html，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如果您有多个webpack入口点，他们都将包括在生成的HTML文件script标签中。
如果你有用webpack产出css文件（例如用ExtractTextPlugin提取的css文件），那么html-webpack-plugin会在html的head中插件link标签引入这些css文件。
完整配置
你可以传一个配置选项的 散列到 HtmlWebpackPlugin，允许的值如下：
title : 用于生成的HTML文件的标题。
filename : 用于生成的HTML文件的名称，默认是index.html。你可以在这里指定子目录（例如:assets/admin.html）
template : 模板的路径。支持加载器，例如 html!./index.html。
inject :true | ‘head’ | ‘body’ | false 。把所有产出文件注入到给定的 template 或templateContent。当传入 true或者 ‘body’时所有javascript资源将被放置在body元素的底部，“head”则会放在head元素内。
favicon : 给定的图标路径，可将其添加到输出html中。
minify : {…} | false 。传一个html-minifier 配置object来压缩输出。
hash : true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
cache : true | false 。如果传入true（默认），只有在文件变化时才 发送（emit）文件。
showErrors : true | false 。如果传入true（默认），错误信息将写入html页面。
chunks : 只允许你添加chunks 。（例如：只有单元测试块 ）
chunksSortMode : 在chunk被插入到html之前，你可以控制它们的排序。允许的值 ‘none’ | ‘auto’ | ‘dependency’ | {function} 默认为‘auto’.
excludeChunks : 允许你跳过一些chunks（例如，不要单元测试的 chunk）.
xhtml : 用于生成的HTML文件的标题。
title : true | false。如果是true，把link标签渲染为自闭合标签，XHTML要这么干的。默认false。
下面是一个示例webpack配置说明如何使用这些选项：
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
生成多个html文件
生成多个html文件，多次声明这个插件在plugins 数组中。如下：
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
自定义模板
如果默认生成的HTML不能满足你的需求，你可以自己写模板。最简单的方法是使用插入选项，并传入一个自定义的html文件。html-webpack-plugin将自动注入所需的css, js, manifest 和 favicon 到标签中。
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.ejs', // Load a custom template (ejs by default but can be changed)
inject: 'body' // Inject all scripts into the body (this is the default so you can skip it)
})
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
my-index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
如果你已经有模板的loader，你可以用它来解析模板。请注意，如果您指定html-loader 并且用了 .html文件作为模板，它也会发生。
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs'
})
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
你可以用开开箱即用的lodash语法。如果inject 性能还不能满足你的需求，而且你想完全控制资源放到哪里，你可以用html-webpack-template project的默认模板 模板作为启动点。
下列这些变量可以用在模板中：
htmlWebpackPlugin:这个插件的特定数据
htmlWebpackPlugin.files 它包含一个从入口点名称映射到包的文件名
"htmlWebpackPlugin": {
"files": {
"css": [ "main.css" ],
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
"main": {
"entry": "assets/main_bundle.js",
"css": []
},
}
}
}
如果你在webpack 配置文件中设置了publicPath。htmlWebpackPlugin.files将会正确映射到 资源散列。
htmlWebpackPlugin.options：传给插件的 配置项。除了插件本身使用这个些配置项以外，你也可以在模板中使用这些配置项。
webpack：webpack的统计对象。注意：这是stats对象，因为它是在HTML模板时发出，因此wepback运行完成后可能没有完整的数据集可用。
webpackConfig：插件编译用的webpack 配置项。例如它可以用来获取publicPath （webpackConfig.output.publicPath）。
过滤Filtering chunks
只包括某些你模块（chunk），你可以限制这些模块的使用。
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]- 1
- 2
- 3
- 4
- 5
通过设置excludeChunks选项还可以排除某些块：
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]- 1
- 2
- 3
- 4
- 5
事件
允许其它插件篡改这个插件执行的以下方法：
1. html-webpack-plugin-before-html-generation
2. html-webpack-plugin-before-html-processing
3. html-webpack-plugin-after-html-processing
4. html-webpack-plugin-after-emit
例如用html-webpack-harddisk-plugin
用法：
/ MyPlugin.js
function MyPlugin(options) {
// Configure your plugin with options...
}
MyPlugin.prototype.apply = function(compiler) {
// ...
compiler.plugin('compilation', function(compilation) {
console.log('The compiler is starting a new compilation...');
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback(null, htmlPluginData);
});
});
};
module.exports = MyPlugin;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
然后在webpack.config.js中这样写：
plugins: [
new MyPlugin({options: ''})
]- 1
- 2
- 3
注意：这个回调函数必须传htmlPluginData ,这是为了把它传给其它也监听“html-webpack-plugin-before-html-processing”这个同一事件的插件。
webpack入门（六）——html-webpack-plugin的更多相关文章
- webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门和实战(二)：全面理解和运用loader和plugins
您的阅读目录: 一.理解webpack加载器loader 二.理解less-loader加载器的使用 三.理解babel-loader加载器的使用 四.webpack命令行常见使用的操作 五.用web ...
- webpack入门和实战(一)：webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- webpack入门（2）
webpack入门(2) ps:每个案例都是基于前一个案例改造的 webpack入门(1) 戳这里 案例源码戳这里 十二.ProvidePlugin 自动加载模块 new webpack.Provid ...
- 【一小时入门】webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack入门（1）
webpack入门(1) 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpac ...
随机推荐
- 在终端更改MAC的MySQL的root密码
- BZOJ 3351: [ioi2009]Regions
对于一个询问(x,y)对y出现次数分类,若<=lim,在儿子处统计答案,若>lim则y的种类肯定<lim,在祖先处统计(仿佛要去重?但是没去重也过了,那个时限仿佛怎么做都能过) #i ...
- Python 基础（一）
本章内容 1.编译和解释型语言的区别 2.Python的解释器 3.pyc文件 4.运行环境 5.变量 6.数据类型 7.字符编码 8.三元运算 编译和解释型语言的区别 编译器是把源程序的每一条语句都 ...
- poj2823 Sliding Window luogu1886 滑动窗口 单调队列
模板题 #include <iostream> #include <cstring> #include <cstdio> using namespace std; ...
- Node.js中测试mysql的代码var client = mysql.createClient运行出错：TypeError: Object # has no method ‘createClient’
今天在WebStorm下熟悉一个node.js的项目,配置环境时,手一抖,将mysql包从0.8升级到了2.1.1,结果再运行时就出错了. [Fri Mar 14 2014 17:05:49] 连接数 ...
- spring boot 启动慢的原因
停留在Spring logo那里差不多4分钟 SpringBoot启动慢的原因应该是某些应用占用了spring config server默认的端口8888,然后SpringCloud进程有些引用了s ...
- 基于UDP的交互的实例
1.实现简单的客户端.服务端聊天交互 问题是:客户端不能单独一直发消息回复.. 服务端: import socket server=socket.socket(socket.AF_INET,socke ...
- SpringMVC对于跨域访问的支持
原文地址:http://docs.spring.io/spring/docs/5.0.0.RC2/spring-framework-reference/web.html#mvc-introductio ...
- Java接口抽象类
抽象类中的方法可以实现,接口中的方法只能声明,不能实现.抽象类的成员变量可以为各种类型,接口的变量只能为public static final.抽象类可以有静态方法和静态代码块,接口不能有.一个类只能 ...
- 学习 JSP：第三步 JSP基础（未完）
因为之前学过也用过JSP,这里只列出笔记,初学者请移步其他教程. JSP隐含对象 JSP支持九个自动定义的变量,江湖人称隐含对象.这九个隐含对象的简介见下表: 对象 描述 request HttpSe ...