extract-text-webpack-plugin 导出 css失败

Question

在webpack中使用extract-text-webpack-plugin 来导出 css样式，webpack配置如下：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: 'css-loader'
    })
}, {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
    })
}

成功导出了 style.css文件，但是在 head标签中仍然有几个 style 标签：

使用extract-text-webpack-plugin 之前的结果如下图：

请问为什么有部分 css 还存在于 head标签中？

Answer 1

多个文件不应该这样子写的

Answer 2

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}