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
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 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