Skip to content
This repository has been archived by the owner on Jan 21, 2021. It is now read-only.

Support for manual placement of <link> tags #85

Open
jimmydief opened this issue Nov 12, 2018 · 6 comments
Open

Support for manual placement of <link> tags #85

jimmydief opened this issue Nov 12, 2018 · 6 comments

Comments

@jimmydief
Copy link

html-webpack-plugin supports disabling the automatic injection of <script> and <link> tags via inject: false. This provides more control and flexibility over the tags and where they appear and allows the plugin to be easily used with near-HTML templating languages that do not include <head> or <body> tags.

It would be awesome if this could be supported in this plugin as well.
@jeffposnick
Copy link
Contributor

I'm not familiar with that option in html-webpack-plugin. What would the syntax for the placeholder/injection point <link>s look like in the scenario you describe?

@jimmydief
Copy link
Author

jimmydief commented Dec 9, 2018 •
edited
Loading

Thanks for the response! Some more details are available here. They expose an htmlWebpackPlugin template variable that can be used in the template to place <link>/<script> tags at any location in the document.

A similar preloadWebpackPlugin variable containing the lists of files that should be preloaded and prefetched would be ideal.

@GiancarlosIO
Copy link

👀

@kirilldronkin
Copy link

Any progress on this issue? It would be lovely to have an ability to inject the preloaded files manually.

For instance the plugin may tap htmlWebpackPluginBeforeHtmlGeneration along with htmlWebpackPluginAfterHtmlProcessing, extend assets in html plugin data with some meta of the preloading chunks, and then in htmlWebpackPluginAfterHtmlProcessing just use this meta for generating. Also inject option from html plugin should be handled in the second phase to prevent a duplicated output.

@blordpluto
Copy link

+1 I feel like the assumption that all chunks should simply be prepended into the <head> is limiting, and possibly counterproductive.

Our use case is an app designed for extremely low powered, very finicky embedded devices. Think throttle x20. Every little thing counts. We have some SSR elements in markup to get initial content rendered as early as possible. Our entry scripts are at the bottom of the <body>. Preloading JS and CSS in the head can cause the dependent requests to go out on the wire before the entry point script, which seems wrong. I want the imported script to be discoverable by the parser, but not sent prior to our entry point script.

In lieu of the full-blown templating system discussed above (which would be great) it would be great to just have an option to either append to <body>, or append to <head>.

Thanks for a great tool.

@blordpluto blordpluto mentioned this issue Jan 29, 2020
Open
@GiancarlosIO
Copy link

👀

@rodrigocfd rodrigocfd mentioned this issue Dec 17, 2021
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@jeffposnick @kirilldronkin @jimmydief @GiancarlosIO @blordpluto