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

Question

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

我尝试阅读the source，但即使我发现我认为实现加载的位，我也无法理解它的行为。

The documentation没有提到这种情况应该如何表现。

Answer 1

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

和

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

似乎是平等的。在函数术语中，这与style(css(file))相同（感谢Miguel）。

请注意，在loaders范围内，他们会从从右到左进行评估。

Answer 2

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

1

  

确保它们的顺序正确（从下到上）。

2

  

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

3

  

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

因此...

如果您有somefile.css并且通过loaderOne传递loaderTwo，则loaderThree的行为类似于常规链接功能。

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

与......完全相同。

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

如果你是来自grunt ||吞咽世界令人困惑。只需从右到左阅读装载机订单。

Answer 3

这个答案对我有帮助，但我想补充另一个影响加载程序顺序的点，即loadername!方法。

我们假设您的配置中url-loader的优先级高于file-loader，并且您希望导入图片路径后者。什么都不做会通过url-loader导入文件（这会创建一个编码的数据网址）。

使用file-loader!加载导入会将导入指向该加载器。

import image from 'file-loader!./my-img.png'