CODEWITHSUNDEEP
webpackwebpack-2
TwistedSt
TwistedSt

Reputation: 639

When do I use 'use' and 'loader' in Webpack 2 module.rules?

I am upgrading my current project to Webpack2, which it was using Webpack1 prior. I have looked into a couple tutorials about upgrading and in general, I do understand.

The issue I keep running into, though, is I'm not sure when to use 'use' and 'loader' in when specifying the module rules (loaders). At first, I thought use replaced loader. I understand this type of syntax:

module: {
  rules: [{
    test: /\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: ...
        }
      },
      'sass-loader'
    ]
  }]
}

However, when I use the ExtractTextPlugin it doesn't seem to like when it's consdiered a use. I've tried this:

      {
        test: /\.scss$/,
        use: [
          {
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: scssLoaders
            })
          }]
      },

with the scssLoaders being:

var scssLoaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: '2',
      localIdentName: '[name]__[local]__[hash:base64:5]'
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader',
    options: {
      outputStyle: 'expanded',
      sourceMap: true,
      sourceMapContents: true
    }
  }
];

I'll just stop here before I go off about other problems. Can someone please help explain what I am missing here? Feel free to ask for any other code you need to help!

Thank you in advance.

Upvotes: 48

Views: 20875

Answers (2)

Albert Olivé Corbella
Albert Olivé Corbella

Reputation: 4209

As the Webpack 2 migration tutorial states, the difference between both is, that if when we want an array of loaders, we have to use use, if it's just one loader, then we have to use loader:

module: {
   rules: [
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      },
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }

Upvotes: 59

simon04
simon04

Reputation: 3302

module.rules is meant for loaders. Specifying a rule as loader is just a shortcut for 

use: [{loader}]

For plugins, use the plugins property in your configuration.

Upvotes: 15

Related Questions