Question

在以下示例（找到here）中，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 of unstyled content (FOUC) 。当然，它也习惯于简单地将CSS与JavaScript分开，因为它通常是首选的，并允许单独缓存。

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

要明确的是，在应用已配置的加载器之后使用了回退，这只是一个额外的步骤，可以将CSS注入<style>标记来自您的JavaScript，这是style-loader唯一做的事情。使用回退而不是将其提取到文件中。

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

1 个答案: