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

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将发出style.css包含css的额外文件.

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

我可以删除该fallback: 'style-loader',选项,一切都继续工作.

回归是什么意思style-loader？

如何/何时触发回退？

我理解style-loader正在做什么以及如何使用样式标签修改DOM如果我不使用ExtractTextPlugin.我在使用时无法理解后备选项ExtractTextPlugin.

Answer 1

假设我们有一个 webpack 配置：

entry: {
    'pageA': './src/pageA',
    'pageB': './src/pageB',
},
...
module: {
    rules: [
        ...
        {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
        },
        ...
    ],
    plugins: [
        ...
        new CommonsChunkPlugin({
            name: "commons",
            chunks: ["pageA", "pageB"]
        }),
        new ExtractTextPlugin('[name].css')
        ...
    ]
}

我们假设将一些 css 放入上面由 CommonsChunkPlugin 生成的commons.js中。

当new ExtractTextPlugin() 使用的allChunks选项为false（默认）时，输出[name].css将不包含commons.js中的 css ，因此某些 css 仍将作为 javascript 与commons.js一起加载（呃，丑陋）。现在，fallbackLoader选项会说“使用style-loader ”，意思是“在浏览器中加载commons.js时将该 css 添加到 <style/> 中”。

但在这种情况下，您最好使用allChunks = true ，这意味着强制new ExtractTextPlugin()也收集（到它创建的单独的 css 文件中）CSS，否则这些 CSS 会进入commons.js。在这种情况下，fallbackLoader选项将变得毫无用处。