Html-webpack-plugin: Better templating options

Created on 14 Aug 2018 · 3Comments · Source: jantimon/html-webpack-plugin

Hi,

I'd like to add custom HTML right after the injected <script> inside the <body> tag. I'm using your plugin to pre-process a template that puts inlined JS data at the bottom of the page. Example:

    <body>
        <!-- Some content, followed with my bundle -->
        <script type="text/javascript" src="/Content/dist/bundle.js"></script>
        <!-- My data, inlined in the template -->
        <script>myBundle.configure({foo:'foo', bar:2})</script>
    </body>
</html>

It would be easy to do it with special options, like beforeChunks or afterChunks, which would be simple strings, or even functions.

Alternatively, I've looked for ways to do regex replaces to replace the closing </body> tag with my inlined data, but I think that regex loaders will replace the content before inserting the bundle, and the resulting HTML won't be what I need.

Any suggestions or alternatives welcome, good luck and thank you for your work ;)

Source

GerkinDev

Most helpful comment

You might try to solve the issue a little bit different:

<script type="text/json" id="bundle-configuration">
{"foo":"foo", "bar":2}
</script>

And load it from within your bundle like this:

const config = JSON.parse(document.getElementById('bundle-configuration').innerHTML);

This way would be more secure and would even allow you to use CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

If you still want to keep your solution you could set inject:false and loop through your assets inside the template for full control of the generated markup.

jantimon on 14 Aug 2018

❤1 🎉1 👍1

All 3 comments

You might try to solve the issue a little bit different:

<script type="text/json" id="bundle-configuration">
{"foo":"foo", "bar":2}
</script>

And load it from within your bundle like this:

const config = JSON.parse(document.getElementById('bundle-configuration').innerHTML);

This way would be more secure and would even allow you to use CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

If you still want to keep your solution you could set inject:false and loop through your assets inside the template for full control of the generated markup.

jantimon on 14 Aug 2018

❤1 🎉1 👍1

Sorry, forgot to answer. Your solution is perfect, and I use it now. Cheers!

GerkinDev on 7 Sep 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.