Structured objects in the loader list

[ide]

Currently to specify a loader you can write:

loaders: [
  { test: /\.js$/, loader: 'babel', query: {stage: 0, optional: ['runtime']} }
]

but this does not support multiple loaders. For that, only the string syntax is supported: react-hot!babel?stage=0&optional[]=runtime. I would like to be able to use the object literal syntax to specify multiple loaders with query parameters:

loaders: [
  {
    test: /\.js$/,
    loaders: [
      { loader: 'react-hot' },  // or just 'react-hot', using the string syntax as shorthand
      { loader: 'babel',  query: {stage: 0, optional: ['runtime'] }
    ]
  }
]

[sokra]

Looks like a good idea. Do you want to send a PR?

[ide]

I probably won't get around to this for awhile but it is a good PR for the community to contribute.

[andyhite]

I just issued a pull request earlier today that addresses this.

[sokra]

Oh thanks, could you "move" this PR to the webpack repo, as webpack/core is obsolute with webpack 2. The code has been moved into:

• webpack/webpack-sources
• webpack/loader-runner
• webpack/webpack

[sokra]

Or better wait, the loader stuff will change anyway with webpack 2, so maybe the LoadersList become obsolete too...

[barroudjo]

Just to let you know, you can use Node querystring module to accomplish this:

var queryObject = {presets: ['es2015', 'runtime'], otherQueryParam: 'foobar'};
var query = require('querystring').stringify(queryObject);
config.loaders = [{
    test: /\.js$/,
    loaders: ['ng-annotate', 'babel?' + query]
}];