{
test: /\.css$/,
loaders: ['style'],
},
{
test: /\.css$/,
loaders: ['css'],
},
和
{
test: /\.css$/,
loaders: ['style', 'css'],
},
看起来相等。从函数的角度来看,这与 style(css(file))
相同(感谢 Miguel)。
请注意,在 loaders
内部,它们从右到左进行评估。
官方文档已经很好地解释了这一点。不幸的是,所有必要的信息都分散在文档的不同部分。让我总结一下您需要知道的内容。
1.
确保它们按正确顺序排列(从底部到顶部)。
2.
它们是以资源文件的源代码作为参数并返回新源代码的函数。
3.
加载器可以链接在一起形成管道应用于资源上。最终加载器应该返回 JavaScript 代码;每个其他加载器可以返回任意格式的源代码,该源代码将传递给下一个加载器。
因此...
如果您有一个名为 somefile.css
的文件,并通过 loaderOne
、loaderTwo
和 loaderThree
进行处理,则它们的行为就像一个常规的链接函数。
{
test: /\.css$/,
loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}
意思与...完全相同。
loaderOne(loaderTwo(loaderThree(somefile.css)))
如果你来自grunt或gulp的世界,这可能会令人困惑。只需从右到左阅读加载器的顺序即可。
loaderOne
。 - aaaaaa.push
将额外的加载器添加到规则中,而不必担心它们的前置。 - Sarkeimport image from 'file-loader!./my-img.png'
!!
开头跳过任何其他加载器... - w00tpitch
函数,pitch
函数的顺序将从左到右(或从上到下)。并且:
如果加载器在pitch方法中返回结果,流程将会反转并跳过剩余的加载器
"style!css"
时,请将它们视为函数:style(css(file))
……在这种情况下,首先调用css
。请注意,此处不要改变原文的意思。 - Miguel Angelostyle(css(file))
的解释使我松了一口气。 - Evi Song