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

根据我的理解,extract-text-webpack-plugin将您在React组件中导入的所有css文件捆绑到一个单独的CSS文件中.然后可以在HTML标头中引用单独的CSS文件以防止FOUC(Flash Of Unstyled Content).使用extract-text-webpack-plugin可以抵消在React组件js文件(如热加载)中导入CSS的一些好处.

那么使用extract-text-webpack-plugin和替换组件文件中的所有样式表导入与HTML模板头中的合并CSS文件的单个链接之间的区别是什么？

是否使用CSS模块或导入CSS是否重要？

更新:添加了澄清示例.

情景A:

component1.css(在component1.js中导入)

component2.css(在component2.js中导入)

由extract-text-webpack-plugin生成的捆绑CSS文件(在HTML标题中调用)

情景B:

component1.css(未在js文件中引用)

component2.css(未在js文件中引用)

使用SASS,Laravel mix.style方法等合并的主CSS文件(在HTML标题中调用)

为什么选择场景A而不是B？