Loaders: worth discussing "-loader" suffix?

[snoopdouglas]

I'm new to Webpack and have found this howto an invaluable resource. I have a problem (that might end up just being a question) about the module.loaders section of our webpack.config.js though:

module: {
  loaders: [
    { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
  ]
}

I'm not sure whether this is specific to the loaders used here, but in Webpack's documentation I'm seeing the -loader omitted - so we could instead use this:

module: {
  loaders: [
    { test: /\.less$/, loader: 'style!css!less' }, // use ! to chain loaders
    { test: /\.css$/, loader: 'style!css' },
    { test: /\.(png|jpg)$/, loader: 'url?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
  ]
}

Is there any difference? Would it be worth adding a note mentioning that they're optional?

[kripod]

There is really no difference between the two. You could even use the following code, which is - in my opinion - the best approach, and produces the same output as the aforementioned snippets.

module: {
  loaders: [
    { test: /\.less$/, loaders: ['style', 'css', 'less'] },
    { test: /\.css$/, loaders: ['style', 'css'] },
    { test: /\.(png|jpg)$/, loaders: ['url?limit=8192'] } // inline base64 URLs for <=8k images, direct URLs for the rest
  ]
}

[snoopdouglas]

Agreed, using an array to specify loaders is far neater.

[mrchief]

Makes it easy to find usages I guess. Searching in files in your project for 'file-loader' and 'url-loader' is going to turn up much accurate results than searching for 'file' or 'url'.