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.

owais · Answer 1 · 2017-06-05T02:51:56.980

0

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' ])

edited Jun 05 '17 at 02:51

answered Jun 04 '17 at 23:21

owais

4,752
5
31
41

so the `css` in the example above is just an extension file ? if so, why is it possible cuz the docs say that the function needs a loader. – Quoc-Hao Tran Jun 05 '17 at 09:53
what are your original intentions... understanding why 'css' used or want to use css with css loader? – owais Jun 05 '17 at 12:59
it's about understanding why 'css' used – Quoc-Hao Tran Jun 06 '17 at 20:12

Using Extract Text Plugin with Webpack

1 Answers1