Html-webpack-plugin: container div without using a template

Created on 3 Aug 2015 · 11Comments · Source: jantimon/html-webpack-plugin

I just started using html-webpack-plugin, and it's definitely handy. It fulfills my project needs pretty much out of the box. I just need a simple HTML file to bootstrap my React app, and html-webpack-plugin makes this easy.

I think the plugin could even further simplify my project if it would allow me to specify that I'd like a div container in the default index.html that it creates. React doesn't like being mounted directly to body. Currently, I still have to include an index.html file in my project just to create this div.

Do you think it'd be worth while to add a config setting that automatically includes an optional container div, if desired? Maybe a setting like includeContainer, where the default would be false or undefined, or something falsy. If it were true, it could just include a div with an id of "container" or something. If it were a string, it could include a div where the string is the id value.

includeContainer: true
includeContainer: false
includeContainer: "fooContainer"

Source

ryancole

👍13

Most helpful comment

We would like the same behavior, maybe something like:
injectIntoBody: "<div id='container'></div>"

We would like to use this plugin to avoid having a static html file, and solving the above need with a template, makes this plugin less helpful for us.

omerts on 13 Jul 2016

👍11

All 11 comments

Just use a template and set inject:true.
Than your template is as easy as: https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_inject_index.html

jantimon on 3 Aug 2015

😕8 👎2

We would like the same behavior, maybe something like:
injectIntoBody: "<div id='container'></div>"

We would like to use this plugin to avoid having a static html file, and solving the above need with a template, makes this plugin less helpful for us.

omerts on 13 Jul 2016

👍11

I would prefer it if there was a way to do this with html-wepback-plugin, but for now I'm using this plugin with a very long name that I wrote a few months back. I hope it's useful.

hph on 29 Dec 2016

👍1

@jantimon The link you provided above is broken. "As easy as [broken link]" isn't very easy.

adelespinasse on 27 Feb 2018

@adelespinasse maybe because you're in an issue from almost three years ago 🤔

ryancole on 27 Feb 2018

@ryancole I know, but since the link was meant to show how to work around this missing feature, it would be worth updating. Or has this feature actually been added since then? I couldn't find it in the documentation. I was hoping ideally for something like @omerts suggested.

For now I'm actually injecting a div from my JS code just before the main ReactDOM.render() call. It seemed easier than figuring out how to make a template.

adelespinasse on 27 Feb 2018

@adelespinasse I don't recommend this plugin. I recommend a different workflow - create a "static assets" directory that mirrors the desired production layout, in which you'd have your index.html file pre-coded with whatever boilerplate you need. With that directory, you can use the webpack copy plugin to copy over that folder to your build output when you build. Lastly, in a webpack dev server environment you can configure that static access folder as the directory out of which webpack dev server serves its content, so that it mimics your production environment.

I've been using the above approach for a few years now and it's much better than dynamically generating HTML, and using other odd plugins.

ryancole on 27 Feb 2018

I would just like to +1 for this request - and perhaps reopen the issue.

If one is using https://github.com/chrisvfritz/prerender-spa-plugin and any tools that render stuff into the page head (https://github.com/declandewet/vue-meta) then you are keeping all of the stuff that would traditionally go into an html template in your javascript as it gets added to the final served output during pre-render.

This means the HTML template that I need is really the most basic html page possible - just what this plugin provides by default!

However Vue (and react?) wants to mount onto something other than the body tag.

Having to add a template file just to add <div id="app"></div> to the page seems a bit unnecessary.

theoephraim on 19 Apr 2018

This would be great too, if I can add a div under body I can bind React without having to worry about injecting scripts using other methods (since React can't bind to the body)