webpack常用插件之HtmlWebpackPlugin


1.HtmlWebpackPlugin

使用HtmlWebpackPlugin两大作用:
1为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
2可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口

2.插件原理

将 webpack中`entry`配置的相关入口thunk  和`extract-text-webpack-plugin`抽取的css样式  插入到该插件提供的`template`或者`templateContent`配置项指定的内容基础上生成一个html文件,具体插入方式是将样式`link`插入到`head`元素中,`script`插入到`head`或者`body`中。

3.插件使用

varHtmlWebpackPlugin=require('html-webpack-plugin')
webpackconfig={
    ...
    plugins:[newHtmlWebpackPlugin( { } )]
}

4.配置参数详解

title:  生成html文档标题
filename: 输出文件的名字
template: 本地模版的位置
inject:
向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同。

1、true或者body:所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false: 所有静态资源css和JavaScript都不会注入到模板文件中

favicon:添加特定favicon路径到输出的html文档中,这个同title配置项,需要在模板中动态获取其路径值
hash: 
true|false是否为静态资源生成唯一hash值
chuck:  允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk;
excludeChunks: 这个与chunks配置项正好相反,用来配置不允许注入的thunk。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • html-webpack-plugin详解 引言 最近在react项目中初次用到了html-webapck-plu...
    peng凯阅读 680评论 0 1
  • webpack配置DEMO webpack.config.js文件官方标配示例如下: 参考各路大神的流程写下来.....
    章鱼不丸子阅读 571评论 0 3
  • webpack配置DEMO webpack.config.js文件官方标配示例如下: 参考各路大神的流程写下来.....
    章鱼不丸子阅读 766评论 0 3
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,542评论 1 32
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,260评论 19 139