webpack浅析--htmlWebpackPlugin用法全解

原创 在下乃坑爹君 随笔 WebPack 232阅读 2017-07-01 10:49:08 举报

##html-webpack-plugin插件的详细介绍和使用

该插件可以简化创建调用webpack bundles的html文件。在每次编译后,文件名会包含有hash值的bundles 特别有用。你可以让插件为您生成一个HTML文件,也可以提供您自己使用lodash模板的模板,或使用您自己的装载机。
维护者:Jan Nicklas @jantimon。

##完整配置详细说明:
[color=#00b050]title : [/color]用于生成的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。

使用 npm 安装这个插件

javascript 代码

该插件将为您生成一个HTML5文件,这个文件用script标签引用所有的webpack包。

#####var HtmlWebpackPlugin = require('html-webpack-plugin');

只需将插件添加到您的webpack配置,如下:

webpack浅析--htmlWebpackPlugin用法全解

webpack浅析--htmlWebpackPlugin用法全解

上面图创建了两个新的new HtmlWebpackPlugin,两个倒没什么,如果几十个,那就一堆的,这是不合理的,所以我要对它进行封装,放到var config = .....代码段的前面,需要的时候调用即可,代码更简洁~

javascript 代码

调用方法:

webpack浅析--htmlWebpackPlugin用法全解

接下来演示下模板,不过在此之前先安装html模块加载器

#####$ npm install html-loader --save-dev

按照下面图创建个头部模版,分离下头部

webpack浅析--htmlWebpackPlugin用法全解

webpack浅析--htmlWebpackPlugin用法全解

webpack浅析--htmlWebpackPlugin用法全解

最后终端webpack,哈哈还是图片好啊,看明白了吧,最后生成的文件就是例子了~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复