HtmlWebpackPlugin实现资源的自定义插入

目前碰到的问题

我们用html-webpack-plugin的inject属性去自动插入打包后的js, css到页面中，但是如果想给script标签添加一个crossorigin属性呢，

例如：

<script type="text/javascript" src="/static/js/debug.f04ad197.js"></script>

想改为：

<script crossorigin="anonymous" type="text/javascript" src="/static/js/debug.f04ad197.js"></script>

或者相对css做一个内联，这些都无法通过html-webpack-plugin直接配置生成

解决问题

查看webpack的一些文档资料，发现在issue中其实也有人提到，https://github.com/jantimon/html-webpack-plugin/issues/157

是一个内联的问题，然而插件作者只提供了html-webpack-plugin的响应事件：

html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

顺着找到了这个插件：

https://github.com/lcxfs1991/blog/issues/2

插件：html-res-webpack-plugin

通过这个插件，可以实现资源的自定义插入

https://github.com/lcxfs1991/html-res-webpack-plugin/blob/v3/README_ZH.md

最终实现

let chunks = {};
chunks['vendor.js'] = {attr: "crossorigin=\"anonymous\"" // attributes for js file in index chunk
}
chunks['index.js'] = {attr: "crossorigin=\"anonymous\"" // attributes for js file in index chunk
}
chunks['index.css'] = {} result.push( new HtmlResWebpackPlugin({ filename: path + name + '.njk', template: template, chunks: chunks }) )

最终效果：

转载于:https://www.cnblogs.com/woodk/p/8288957.html

HtmlWebpackPlugin实现资源的自定义插入相关推荐

玩转springboot：默认静态资源和自定义静态资源实战
点个赞,看一看,好习惯!本文 GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了3个月总结的一线大厂Java面试总结,本人已拿腾 ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
kindeditor4.1.11版自定义插入网络视频代码(支持哔哩、优酷、爱奇艺、土豆、腾讯视频、56等视频网站)
kindeditor4.1.11版自定义插入网络视频代码(支持哔哩.优酷.爱奇艺.土豆.腾讯视频.56等视频网站) 看了几篇和下载过别人修改的版本,都测试了,结果很失望,最后自己修改,得到了想要的结果 ...
word自定义插入图片快捷键
word2003自定义"插入图片"快捷键工具>自定义>键盘>指定命令选"插入",命令选"InsertPicture",自 ...
ppt资源的拖动插入方法
背景介绍一个ppt的小插件,可以通过右侧自定义的taskpane,拖动显示资源进行插入. 实现步骤资源可拖动设置拖动目标区域设置拖动释放动作及坐标坐标转换关键点 1.确定目标区域假设ta ...
搭建onlyoffice实现多人在线编辑，以及添加中文字体，使用自定义插入的插件
onlyoffice安装教程演示图获取安装资源可以直接在onlyoffice官网下载社区版(有限制最高20在线编辑),采用docker安装,直接docker pull 镜像.也可以直接私信我镜像 ...
（13）处理静态资源（自定义资源映射）【从零开始学Spring Boot】
上面我们介绍了Spring Boot 的默认资源映射,一般够用了,那我们如何自定义目录? 这些资源都是打包在jar包中的,然后实际应用中,我们还有很多资源是在管理系统中动态维护的,并不可能在程序包中 ...
Spring Boot处理静态资源（自定义资源映射）
2019独角兽企业重金招聘Python工程师标准>>> Spring Boot默认是使用resources下的静态资源进行映射.如果我们需要增加以 /myres/* 映射到 clas ...
资源获取:自定义SuperSet CSS模板
需求: 因为对前端不熟悉,且网上资源实在匮乏: 该文的<已有示例参考>暂不符合本人的审美,也不够美观: 故寻求好看的自定义SuperSet CSS模板或者有关SuperSet CSS的参考 ...