Extending from the syntax generated by angular-cli using extract I came in the situation of using multiple loaders where one of the loaders needed a query string.
Using the array syntax and adding the query like
// ...
{
"test": /\.pug$/,
"loader": ['raw-loader', 'pug-html-loader'],
"query": { doctype: "html", plugins: ["pug-plugin-ng"] }
},
// ...
did not work (which makes sense as webpack cannot know which loader should use the query.
However out of curiosity I fooled around and tried to rewrite the config so that it would be clearly paired like
{
"test": /\.pug$/,
"loader": [
'raw-loader',
{
"loader": 'pug-html-loader',
"query": { doctype: "html", plugins: ["pug-plugin-ng"] }
}
]
},
without ever expecting it to work. But to my astonishment it did!
When trying to find some documentation on this syntax I found that the proper way to do it was
{
"test": /\.pug$/,
use: [
'raw-loader',
{
"loader": 'pug-html-loader',
"options": { doctype: "html", plugins: ["pug-plugin-ng"] }
}
]
},
according to the official docs.
Now to the actual question: Why does the second syntax work? I cannot find anything in the docs explaining it.
Webpack currently accepts both ways for backwards compatibility. It seems we can currently mix and match stuff, but it might fail sometime in the future.
See https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules