为什么 style-loader 被用作 Webpack 的 ExtractSass 插件的后备？

在下面的例子中（发现here https://github.com/webpack-contrib/sass-loader#in-production), style-loader被用作开发模式的后备。为什么？

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractSass
    ]
};

从 JavaScript 中提取 CSS 主要用于不必依赖 JavaScript（捆绑包）完全加载，直到它将 CSS 作为<style>标签，这可能会导致无样式内容的 Flash (FOUC) https://en.wikipedia.org/wiki/Flash_of_unstyled_content。当然，它也用于简单地将 CSS 与 JavaScript 分开，因为这通常是首选并且允许单独缓存。

在开发中这并不重要，因为 FOUC 基本上是一个性能问题，就像 JavaScript 的加载时间一样，希望您在开发中也不会丑化。这既不是你主要关心的问题，也不代表开发模式。除了需要额外的编译步骤之外，提取 CSS 也会带来一些缺点。例如，您会失去热重载，因为新编译的包在提取 CSS 内容时没有发生变化。优点主要是您在生产中关心的方面，缺点是对开发产生负面影响。也可以看看用途 - 优点和注意事项 https://github.com/webpack-contrib/extract-text-webpack-plugin#usage.

需要明确的是，使用了后备after配置的加载器已被应用，这只是一个额外的步骤，能够将 CSS 注入到<style>来自 JavaScript 的标签，这是唯一的东西style-loader做。使用后备而不是将其提取到文件中。