Marcelo Henrique Marcelo Henrique -4 years ago 75
Javascript Question

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

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
. 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
in production? Or you just manually add It later on?

Thanks, []s

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download