Webpack的装载程序顺序是什么？

当我有一个加载程序配置，其中有多个测试与一个文件匹配时，我希望只使用第一个匹配的加载程序，但事实并非如此。

我尝试阅读源代码，但是即使我发现我认为可以实现加载的部分，也无法理解它的行为。

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

{
    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)))

如果您来自咕unt声|| 大吃一惊的世界，令人困惑。只需从右到左读取装载机的顺序即可。

这个答案对我很有帮助，但我想补充一点，这会影响装载机的顺序，即装载机名称！方法。

假设url-loader您的配置中的优先级高于，file-loader并且您想使用后者导入图像路径。不执行任何操作将通过导入文件url-loader（这将创建编码的数据URL）。

在导入之前加上前缀file-loader!会将导入定向到该加载程序。

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