使用Webpack

Question

我想要实现的是一个Webpack配置，其中CSS由最终的JS导出处理，但是，一些特定的文件被导出到外部文件（以优化关键的CSS加载）。

因此，我们的想法是：如果文件名以_critical-开头，请将其放在文件中。

所以，现在这是我的webpack.config.js：

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

module.exports = {
  entry: './src/entry.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ],
        test: /\.s?css$/,
      },
      {
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader'
          ]
        }),
        test: /\A_critical-.*\.s?css$/,
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,  
        use: [{
          loader: 'url-loader',
          options: { 
            limit: 10000,
            name: 'images/[hash]-[name].[ext]'
          } 
        }]
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin("styles.css"),
  ],

  devtool: 'cheap-module-eval-source-map',

  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

而且，在某些时候，我的代码中有import './components/base/_critical-color.scss';。

当我运行Webpack时，没有错误。但也没有styles.css。

我错过了什么？