add custom attribute support for preload/prefetch by moyus · Pull Request #53 · numical/script-ext-html-webpack-plugin · GitHub | Latest TMZ Celebrity News & Gossip | Watch TMZ Live
Skip to content

add custom attribute support for preload/prefetch #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

add custom attribute support for preload/prefetch #53

wants to merge 1 commit into from

Conversation

moyus
Copy link

@moyus moyus commented Oct 23, 2018

When maintain a large web application, we need to deploy static assets on CDN, which has a different origin against our web domain. So in order to use tools like sentry to track js errors, we need to add crossorigin="anonymous" attribute on scripts.

However, when use preload/prefetch feature of script-ext-html-webpack-plugin, the output <link /> don't contain crossorigin="anonymous", which will cause double fetches.

<link ref="preload" as="script" href="//a-cdn-server.com/some-script.js" />
...
<script src="//a-cdn-server.com/some-script.js" crossorigin="anonymous"></script>

This PR is try to add a feature to support custom attributes for link tag.

example:

plugins: [
  new HtmlWebpackPlugin(),
  new ScriptExtHtmlWebpackPlugin({
      custom: {
        test: /\.js$/,
        attribute: 'crossorigin',
        value: 'anonymous'
      },
      preload: {
        test: /\.js$/,
        attrs: {
          crossorigin: 'anonymous'
        }
      }
  })
]

@numical
Copy link
Owner

numical commented Oct 29, 2018

I can see this being useful.
The problem is a messy configuration API - with custom attributes in two places.
Though it will be a harder implementation we really need to look at using the existing custom config in resource hints as well.
Also I'll need some tests please!

This was referenced Oct 29, 2018
Closed
Closed
@numical
Copy link
Owner

numical commented Oct 31, 2018

Hi,
I found a neater way of doing this - the custom attributes are added last so all I had to do was extend this processing to <link ... as="script" ... /> tags.
See this commit for the details.
This is available from v2.1.0 onwards.
Let me know if it does not work for you.

@numical numical closed this Oct 31, 2018
@moyus
Copy link
Author

moyus commented Nov 1, 2018

Seems great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@moyus @numical

TMZ Celebrity News – Breaking Stories, Videos & Gossip

Looking for the latest TMZ celebrity news? You've come to the right place. From shocking Hollywood scandals to exclusive videos, TMZ delivers it all in real time.

Whether it’s a red carpet slip-up, a viral paparazzi moment, or a legal drama involving your favorite stars, TMZ news is always first to break the story. Stay in the loop with daily updates, insider tips, and jaw-dropping photos.

🎥 Watch TMZ Live

TMZ Live brings you daily celebrity news and interviews straight from the TMZ newsroom. Don’t miss a beat—watch now and see what’s trending in Hollywood.