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:
- component1.css (imported in component1.js)
- component2.css (imported in component2.js)
- bundled CSS file generated by extract-text-webpack-plugin (called in the HTML header)
Scenario B:
- component1.css (not referenced in js files)
- component2.css (not referenced in js files)
- master CSS file merged using SASS, Laravel mix.style method etc. (called in the HTML header)
Why go with Scenario A and not B?