Webpack 加载器语法 - 带查询的数组

Question

使用 extract 从 angular-cli 生成的语法扩展我遇到了使用多个加载器的情况，其中一个加载器需要查询字符串。

使用数组语法并添加类似

的查询

// ...
{
    "test":   /\.pug$/,
    "loader":  ['raw-loader', 'pug-html-loader'],
    "query":  { doctype: "html",  plugins:  ["pug-plugin-ng"] }

},
// ...

没有工作（这是有道理的，因为 webpack 不知道哪个加载器应该使用查询。

但是出于好奇，我四处乱逛并尝试重写配置，以便它像

一样清楚地配对

{
    "test":   /\.pug$/,
    "loader":  [
        'raw-loader',  
        {
            "loader":   'pug-html-loader',
            "query":  {  doctype:   "html",  plugins:  ["pug-plugin-ng"] }
        }
    ]
},

没想到它会起作用。 但令我惊讶的是它做到了！

在尝试查找有关此语法的一些文档时，我发现正确的方法是

{
    "test":   /\.pug$/,
    use:  [
        'raw-loader',  
        {
            "loader":   'pug-html-loader',
            "options":  {  doctype:   "html",  plugins:  ["pug-plugin-ng"] }
        }
    ]
},

根据 official docs.

现在开始真正的问题：为什么第二种语法有效？我在文档中找不到任何解释它的内容。

Answer 1

为了向后兼容，Webpack 目前接受这两种方式。看来我们目前可以混合搭配，但将来可能会失败。

见https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Webpack 加载器语法 - 带查询的数组

Webpack loader syntax - array with query

webpack

webpack-2