使用extract-text-webpack-plugin和在HTML标头中链接合并的CSS文件之间有什么区别？

Question

From what I understand extract-text-webpack-plugin bundles all css files imported in your React components into a single separate CSS file. The separate CSS file can then be referenced in your 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 component js files such as hot-loading.

What is then the difference between using extract-text-webpack-plugin and replacing all stylesheet imports in your component files with a single link to a merged CSS file in your HTML template header?

Does it matter whether you use CSS modules or import your CSS?

UPDATE: Added example for clarification.

Scenario A:

1. component1.css (imported in component1.js)
2. component2.css (imported in component2.js)
3. bundled CSS file generated by extract-text-webpack-plugin (called in the HTML header)

Scenario B:

1. component1.css (not referenced in js files)
2. component2.css (not referenced in js files)
3. master CSS file merged using SASS, Laravel mix.style method etc. (called in the HTML header)

Why go with Scenario A and not B?

Answer 1

Good question ariebear!

If you want to use css modules, then yes, there's definitely a benefit to importing the css files into your js files/react components. The main one is that you no longer have to concern yourself with scoping issues, or worry about writing the same class in 2 different areas. The cascade becomes localized to each component.

If you're not using css modules, then there isn't much benefit at all. Sure, you get hot reloading, but there are other solutions available for that.

Hope that helps!

Answer 2

The advantages to combining all your stylesheets into 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 inlined into your JS bundle, which can improve performance as the CSS bundle will be loaded in parallel to the JS bundle.

Answer 3

You're asking a lot of different questions here, so here's my best shot.

You'd use extract-text-plugin in production. Hot reloading isn't necessary in production and you're right that it gets rid of FOUC. There are a few other advantages listed straight from the source as well.

You can still import your .css into your components, if you wish to- or keep them separate. It does matter if you import or require your CSS, that has to do with if you're using es2015 or not.