Is there a practical way of adding Webpack's generated stylesheets in Production

Question

I'm building a normal App (JQuery, ES6, etc) with webpack and it's usual loaders. I came across the following situation:

• In development, I wish to use the style-loader, to have my css in an inline tag.
• In production, I want to have a minified-css-bundle-file (dam, what a word), that I can cache later on and avoid FOUC. I'm using the well known Extract Text Plugin for that purpose.

The problem is, when I am in production I will need to add a <link href="some-bundle.css" /> to my index.html. OK. But by doing this, back in development I would get a 404 every time, since my css is not coming from any external source (It comes from JS and it's inline thing). And if I don't add the link tag, i'm never getting the compiled stylesheet.

So, how do you do this? Is there any loader to auto add the <link> in production? Or you just manually add It later on?

Thanks, []s

Answer 1

You could use HTML Webpack Plugin to generate index.html files based on your Webpack build (dev/prod). One would include the link tag, another would not.