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

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

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

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,524评论 1 32
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,263评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,728评论 7 110
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,340评论 4 31
  • Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车! webpack是什么...
    王饱饱阅读 588评论 0 9