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加载 coffe ...
- 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
- 时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师 最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
- 【webpack】webpack 入门教程
一.Webpack 是什么 Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler) 在Wbpack看来,前端的所有资源文件( js / json / css / im ...
- (三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由 博客园 首页 新随笔 联系 订阅 管理 随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
- 新手入门，webpack入门详细教程
第一步,要使用webpack,首先要安装node.js,https://nodejs.org/en/ 官网直接下载即可,具体安装教程,可以参考菜鸟教程 https://www.runoob.com/n ...
- webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
- webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
- webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
- WEBPACK 入门
webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器.webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源.(webpack is a mod ...
最新文章
- Revit的Enscape基本培训(2021) Enscape Essential Training for Revit (2021)
- ASP.NET CORE之上传文件夹
- mail ru android,mail ru app下载
- 创建表头固定，表体可滚动的GridView(转)
- mysql2005触发器修改成绩_创建、更改和删除触发器
- Linux实战教学笔记13:定时任务补充
- CSS两栏布局之左栏布局
- 小程序识别车牌php,微信小程序——车牌键盘输入js+css
- Java项目性能监控和调优工具-Javamelody
- java堆排序图解_108-堆排序的思路图解_清华毕业老程序员亲授通俗易懂的Java数据结构和算法教程_Java视频-51CTO学院...
- EasyUI DataGrid 添加排序
- 两局域网互联解决方案
- [转]Delphi的运算符重载
- 域名解析服务器地址,中国优秀DNS公共域名解析服务器IP地址列表
- 2021小白Python入门学习记录Day3（win10系统、Python3.9、使用Pycharm）python高级数据类型(字符串、列表、元组、字典、集合) 及其操作
- k8s教程（pod篇）-容器获取pod信息（Downward API）
- 全国计算机等级考试二级教程——Python语言程序设计（2018年版）习题代码：第2章
- 计算机画图照片大小,电脑自带的画图工具怎么调整图片的大小?
- 爬虫入门必学——常见的几种网站类型
- Android Studio Git教程