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

Question

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.

question from:https://stackoverflow.com/questions/41750715/when-do-i-use-use-and-loader-in-webpack-2-module-rules

Answer 1

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"
        ]
      }
    ]
  }