webpack的加载程序顺序是什么？

Question

当我有一个带有多个匹配文件的测试的加载器配置时,我希望只使用第一个匹配的加载器,但似乎并非如此.

我尝试读取源代码,但即使我发现我认为实现加载的位,我也无法理解它的行为方式.

文档没有提到这种情况应该如何表现.

Answer 1

{
    test: /\.css$/,
    loaders: ['style'],
},
{
    test: /\.css$/,
    loaders: ['css'],
},

和

{
    test: /\.css$/,
    loaders: ['style', 'css'],
},

似乎是平等的.在功能方面,这与style(css(file))(感谢Miguel)相同.

请注意,loaders它们在内部从右到左进行评估.

装载机就像功能一样,这就是它从右到左的原因.当你使用这个``style!css``时,想象它们就像函数:`style(css(file))``在这种情况下``css`首先被调用. (15认同)
从右到右的评价使我挣扎了一段时间.@ miguel-angelo你的`风格(css(文件))`解释对我来说是一种解脱. (11认同)
嗯，我认为这不是非常有用的行为：-/我宁愿使用preLoaders来实现该行为... (2认同)

Answer 2

官方文件解释得非常好.不幸的是,所有必要的信息都在文档的不同部分中传播.让我结束你需要知道的一切.

1.

确保它们的顺序正确(从下到上).

2.

它们是将资源文件的源作为参数并返回新源的函数.

3.

装载机可以链接.它们应用于资源的管道中.最终的加载器有望返回JavaScript; 每个其他加载器都可以以任意格式返回源,并将其传递给下一个加载器.

所以...

如果你有somefile.css,你通过它传递loaderOne,loaderTwo,loaderThree是像一个普通的链接功能的行为.

{
    test: /\.css$/,
    loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}

意思是完全相同的......

loaderOne(loaderTwo(loaderThree(somefile.css)))

如果你来自咕噜声|| 吞咽世界令人困惑.只需从右到左阅读装载机订单.