昨天在看深入浅出webpack一书,读到为单页应用生成html一章时,提到内联css通过_inline的方式,当时突然想把他作为单独的css文件输出,然后自动注入。
其用于生成html的插件是
new WebPlugin({
template: './template.html', // HTML 模版文件所在的文件路径
filename: 'index.html' // 输出的 HTML 的文件名称
}
开始没仔细看,以为是html-webpack-plugin, 就把页面中的这两处删除了,希望能够生成独立css文件,然后注入,几番折腾,就是不对。
然后就去npm上查看html-webpack-plugin的介绍(其实是web-webpack-plugin),用法没错。到底什么原因?
继续查看,突然在一个相关推荐看到了web-webpack-plugin,再一看代码,我去,不是一个东西。
web-webpack-plugin 使得通过html模版你可以很方便清晰的描述资源应该注入的位置
注意重点来了:
1.在html模版里通过 引入需要的entry,src=”B” 中的B为chunk配置的名称
2. 注释 代表除开通过引入的资源外,在 requires 里配置的剩下的依赖的资源应该被注入的地方,如果模版没有出现就放在body标签的最后
输出
配置资源属性 demo
针对每一个html依赖的资源,有如下属性可以配置:
_dist 只有在生产环境下才引入该资源
_dev 只有在开发环境下才引入该资源
_inline 把该资源的内容潜入到html里
_ie 只有IE浏览器才需要引入的资源,通过 [if IE]>resource
有了这个,就可以更加灵活的控制模板中注入那些资源文件了。