Question

使用webpack-contrib/extract-text-webpack-plugin中的示例：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

备用选项的目的是什么？

我如何看待此代码段的工作原因是：

我指示webpack在遇到的每个ExtractTextPlugin文件上使用.scss。我告诉ExtractTextPlugin使用['css-loader', 'sass-loader']个加载器来生成css。然后，Webpack将发出包含css的额外style.css文件。

然后我可以在我的index.html中引用这个文件，或者如果我使用的是html-webpack-plugin，它会自动添加到它。

我可以删除fallback: 'style-loader',选项，一切都继续有效。

回退到style-loader是什么意思？

如何/何时触发回退？

如果我没有使用style-loader，我理解ExtractTextPlugin正在做什么以及如何使用样式标记修改DOM。当我使用ExtractTextPlugin时，我无法理解后备选项。

Answer 1

假设我们有一个webpack配置：

DECLARE @source  VARCHAR(20);
SET @source = '1,2,3,4';

DECLARE @values TABLE
(
    [Id]  VARCHAR(20)
);

INSERT INTO @values
(
    [Id]
)
       SELECT 
           value
       FROM [STRING_SPLIT](@source, ',')
           WHERE RTRIM(value) <> '';

INSERT INTO @values ([Id]) VALUES ('5')

DELETE FROM @values WHERE Id = 2

SELECT  
JSON_QUERY('[' + STUFF(( SELECT ',' + '"' + Id + '"' 
FROM @values FOR XML PATH('')),1,1,'') + ']' ) ids  
FOR JSON PATH , WITHOUT_ARRAY_WRAPPER

让我们假设在上面的CommonsChunkPlugin生成的 commons.js 中得到一些css。

当新的ExtractTextPlugin（）使用的 allChunks 选项 false （默认）时，输出 [name] .css 将不包含来自 commons.js 的css所以有些css会像 commons.js （uu，丑陋）一样以javascript加载。现在 fallbackLoader 选项会说“使用 style-loader ”意味着“在加载 commons.js时将该css添加到＆lt; style /＆gt; 在浏览器中“。

但是对于这种情况你可以更好地使用 allChunks = true，这意味着强制新的ExtractTextPlugin（）也收集（进入它创建的单独的css文件）否则将进入 commons.js 的css。在这种情况下， fallbackLoader 选项将变得无用。

ExtractTextPlugin.extract中的回退选项的目的是什么

1 个答案: