插件:html-res-webpack-plugin

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

目前碰到的问题

我们用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

最终实现

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
  })
)

最终效果:

推荐一个比HtmlWebpackPlugin更灵活的插件的更多相关文章

  1. 推荐一个Android Studio很实用的插件android-butterknife-zelezny

    当你按钮很多,你又懒得写代码,虽然通过重写onClick比较方便,那么我们能不能连这个switch都省略掉呢? 答案是肯定的,下面这个插件就帮我们解决了这个问题! Android-butterknif ...

  2. 推荐一个pycharm验证xpath表达式的插件XPathView +​ XSLT

    使用Appium进行自动化测试,使用xpath元素定位,想验证xpath定位是否正确,可以使用在线的xpath验证网站,也可以使用这次推荐的插件XPathView +​ XSLT.

  3. 推荐一个用于压缩图片的JS插件:localResizeIMG

    惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来 ...

  4. 推荐一个比crontab更好用的东西:crongo

    This is a crontab service that supports hot plug and high performance. In addition, it supports seco ...

  5. 推荐一个 angular 图像加载插件

    推荐一个简单的 Angular 图片加载插件:vgSrc,插件根据图片资源的不同加载状态,显示不同图片,亲测兼容IE-8. 使用 推荐使用 bower 加载: bash bower install v ...

  6. 推荐一个可以直接在Visual Studio中看到complexity的插件CodeMaid

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个可以直接在Visual Studio中看到complexity的插件CodeMaid.

  7. 推荐一个JavaScript触发器插件,可通过指定频次、指定时间内触发指定的处理函数

    推荐一个JavaScript触发器插件js-trigger js-trigger是一个JavaScript触发器插件,可通过指定频次.指定时间内触发指定的处理函数 https://tanwei-cc. ...

  8. 推荐一个 Laravel admin 后台管理插件

    如何优雅的写代码,我想是每位程序员的心声.自从15年初第一次接触 Laravel 4.2 开始,我就迷上使用 Laravel 框架了.我一直都想找个时间好好写写有关 Laravel 的使用文章,由浅入 ...

  9. 如何定义一个高逼格的原生JS插件

    插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服 ...

随机推荐

  1. codevs1051

    题目地址:http://codevs.cn/problem/1051/ 分析: --题目难度:提高一等 1.数据结构(Data Structure):①Hash(用map或人工)②Stack(栈) 2 ...

  2. 快看Sample代码,速学Swift语言(2)-基础介绍

    Swift语言是一个新的编程语言,用于iOS, macOS, watchOS, 和 tvOS的开发,不过Swift很多部分内容,我们可以从C或者Objective-C的开发经验获得一种熟悉感.Swif ...

  3. 关键字中mysql数据库查询条件带中文无结果解决办法

    package keyword; import java.io.UnsupportedEncodingException; import java.sql.Connection; import jav ...

  4. 最长回文子序列(LPS)

    问题描述: 回文是正序与逆序相同的非空字符串,例如"civic"."racecar"都是回文串.任意单个字符的回文是其本身. 求最长回文子序列要求在给定的字符串 ...

  5. 1-MySQL数据库(android连接MySQL数据库)

    很好的链接 http://www.cnblogs.com/best/p/6517755.html  一个小时学会MySQL数据库 http://www.cnblogs.com/klguang/p/47 ...

  6. Ubuntu中启用ssh服务---转载

    ssh程序分为有客户端程序openssh-client和服务端程序openssh-server.如果需要ssh登陆到别的电脑,需要安装openssh-client,该程序Ubuntu是默认安装的.而如 ...

  7. node基础篇二:模块、路由、全局变量课堂(持续)

    今天继续更新node基础篇,今天主要内容是模块.路由和全局变量. 模块这个概念,在很多语言中都有,现在模块开发已经成为了一种潮流,它能够帮助我们节省很多的时间,当然咱们的node自然也不能缺少,看下例 ...

  8. vuejs实现本地数据的筛选分页

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进 ...

  9. BeanShell Sample与控制台交互

    应用的场景:业务当中涉及到一些敏感信息,如验证码,银行卡密码等或是动态变化的,不能直接写在脚本中,就需要通过控制台手动输入 如密码已键盘的方式输入,在控制台中以密码的方式显示 处理方法:添加 bean ...

  10. CSS实现商城分类导航效果(hover选择器)

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...