What is the difference between using extract-text-webpack-plugin and linking the combined CSS file in the HTML header?

Question

From what I understand, extract-text-webpack-plugin bundles all the css files imported into your React components into a separate separate CSS file. Then a separate CSS file can be referenced in the HTML header to prevent FOUC (Flash Of Unstyled Content). Using extract-text-webpack-plugin counteracts some of the benefits of importing your CSS in your React js files, such as hot loading.

What is the difference between using extract-text-webpack-plugin and replacing all import stylesheets in your component files with one link to the combined CSS file in the header of the HTML template?

It doesn't matter if you use CSS modules or import your CSS?

UPDATE: added an example for clarification.

Scenario A:

• component1.css (imported into component1.js)
• component2.css (imported into component2.js)
• the attached CSS file generated by extract-text-webpack-plugin (called in the HTML header)

Scenario B:

• component1.css (not specified in js files)
• component2.css (not specified in js files)
• master CSS file combined using the SASS method, Laravel mix.style, etc. (called in the HTML header)

Why go with scenario A, not B?

Answer 1

Good question ariebear!

If you want to use css modules, then yes, it is definitely useful to import css files into your js files / respond to components. The main thing is that you no longer need to deal with review issues or worry about writing the same class in two different areas. The cascade becomes localized for each component.

If you do not use css modules, then there is no use. Of course, you get a hot reboot, but there are other solutions for this.

Hope this helps!

Answer 2

Here you ask a lot of different questions, so here is my best shot.

You must use extract-text-plugin during production. A hot reboot is not required in production, and you are right that it gets rid of FOUC. There are several more benefits listed as directly from the source .

You can still import .css into your components if you want, or save them separately. It matters if you import or require your CSS, which is due to the fact that you are using es2015 or not.

Answer 3

The benefits of combining all your stylesheets in one is that the browser makes a separate request for each stylesheet. If you combine several into one, you will only make one request. Using this plugin, your styles will no longer be embedded in your JS package, which can improve performance because the CSS package will be loaded in parallel with the JS package.