47

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.

0

2 Answers 2

57

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"
        ]
      }
    ]
  }
2
  • 5
    Note: That using loaders as opposed to loader will still work but is now considered a legacy option webpack.js.org/guides/migrating/#chaining-loaders Jun 25, 2017 at 21:59
  • 7
    Great answer, thanks. You have to love it when a tool already criticized for its complex configuration decides to make it even harder to configure by making you use two properties when you used to just be able to use one :( Jul 13, 2018 at 22:12
15

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.