未捕获（承诺）TypeError：无法读取未定义的ExtractTextPlugin的属性“调用”

Question

我一直在尝试将ExtractTextPlugin添加到我的Webpack配置中以在我的React项目中进行代码拆分。我以前使用MiniCssExtractPlugin（mini-css-extract-plugin）来编译我的.scss文件，其内容如下...

module: {
    rules: [{
        test: /\.s?css$/,
        use: [
               MiniCssExtractPlugin.loader,
               { loader: 'css-loader', options: { importLoaders: 1 } },
               { loader: 'postcss-loader' },
               { loader: 'sass-loader' }
            ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
         filename: "[name].css",
    })
  ]

这按预期工作。

现在我已经尝试过ExtractTextPlugin

module: {
    rules: [{
            test: /\.s?css$/,
            use: ExtractTextPlugin.extract({
              use: [
                {
                    loader: 'css-loader',
                    options: { importLoaders: 1 }
                }, 
                { loader: 'postcss-loader' },
                { loader: 'sass-loader' }
              ]
            })
          },
  plugins: [
    new ExtractTextPlugin({
         filename: "[name].css",
    })
  ]

Webpack本身似乎可以很好地构建，当我尝试加载网站时，控制台中会出现错误。

错误如下...

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main.bundle.js:84)
    at eval (Login.scss:1)
    at Object../components/login/Login.scss (2.js:213)
    at __webpack_require__ (main.bundle.js:84)
    at eval (Login.js:4)
    at Module../components/login/Login.js (2.js:202)
    at __webpack_require__ (main.bundle.js:84)

这是main.bundle.js内失败的地方

// Execute the module function /******/ 
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

我不确定从哪里开始寻找解决此问题的方法，我们将不胜感激。