为什么样式加载器被用作Webpack的ExtractSass插件的后备？

Question

在以下示例(此处找到)中,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
    ]
};

Answer 1

从JavaScript中提取CSS主要用于不必依赖您的JavaScript(捆绑)完全加载,直到它将CSS作为<style>标记注入头部,这可能导致Flash无格式内容(FOUC).当然,它也用于简单地将CSS与JavaScript分开,因为这通常是首选,并允许单独缓存.

在开发过程中,这并不重要,因为FOUC基本上是一个性能问题,就像JavaScript的加载时间一样,希望你也不会在开发中使用.这既不是您的主要关注点,也不是开发模式中的代表.除了作为额外的编译步骤之外,提取CSS也带来了一些缺点.例如,您丢失了热重新加载,因为新编译的包没有随着CSS内容的提取而改变.优点主要是您关心生产的方面,缺点会对开发产生负面影响.另请参见用法 - 优点和注意事项.

为了清楚起见,在应用已配置的加载器之后使用回退,这只是一个额外的步骤,可以将CSS <style>从JavaScript 注入到标记中,这是唯一style-loader可行的.使用回退而不是将其提取到文件.