Using Extract Text Plugin with Webpack

Question

I'm trying to learn how to use Extract Text Plugin and I found this example:

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

module.exports = {
  entry:  './src',
  output: {
    path: 'build',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        include: __dirname + '/src',
      },
      {
        test: /\.css/,
        loader: ExtractTextPlugin.extract("css")
      }
    ],
  },
  plugins: [
    new ExtractTextPlugin("styles.css")
  ]
};

Why is the "css" used as a loader ? I tried to look at the docs but still can't understand this.

Thank you all in advance for your helps.

Answer 1

The extractTextPlugin can work with sass, less postcss etc so its asking plugin to only look for css . thats why you are using css there.

extractCSS.extract([ 'css-loader', 'postcss-loader' ])

extractLESS.extract([ 'css-loader', 'less-loader' ])