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加载器语法 - 带查询的数组

1 个答案: