webpack一次错误的意外

昨天在看深入浅出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）,用法没错。到底什么原因？​

TMD

继续查看，突然在一个相关推荐看到了web-webpack-plugin,再一看代码，我去，不是一个东西。

web-webpack-plugin 使得通过html模版你可以很方便清晰的描述资源应该注入的位置

webpack.config.js html

注意重点来了：

1.在html模版里通过 引入需要的entry，src=”B” 中的B为chunk配置的名称

2. 注释 代表除开通过引入的资源外，在 requires 里配置的剩下的依赖的资源应该被注入的地方，如果模版没有出现就放在body标签的最后

​输出

配置资源属性 demo

针对每一个html依赖的资源，有如下属性可以配置：

_dist 只有在生产环境下才引入该资源

_dev 只有在开发环境下才引入该资源

_inline 把该资源的内容潜入到html里

_ie 只有IE浏览器才需要引入的资源，通过 [if IE]>resource

有了这个，就可以更加灵活的控制模板中注入那些资源文件了。