webpack的加载器顺序是什么？

Question

当我有一个包含多个匹配文件的加载器配置时，我期望只使用第一个匹配的加载器，但事实并非如此。

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

文档也没有提及该情况应该如何处理。

- w00t

Answer 1

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

和

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

看起来相等。从函数的角度来看，这与 style(css(file)) 相同（感谢 Miguel）。

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

- Juho Vepsäläinen

---

嗯，我认为这种行为并不是很有用 :-/ 我宁愿使用 preLoaders 来实现这种行为... - w00t

加载器的作用类似于函数，这就是为什么它们从右到左执行。当您使用"style!css"时，请将它们视为函数：style(css(file))……在这种情况下，首先调用css。请注意，此处不要改变原文的意思。 - Miguel Angelo

从右往左评估让我苦恼了一段时间。@miguel-angelo 您对style(css(file))的解释使我松了一口气。 - Evi Song

从右至左在Webpack 3语法中最可能实际意义是从底部到顶部，也就是说最底层的函数通常被称作“第一”或者“内部”函数。 - Frank N

我不知道这是什么时候添加的，但终于有关于顺序的文档了：https://webpack.js.org/concepts/loaders/#loader-features加载器可以链接在一起。链中的每个加载器都会对处理过的资源应用转换。链是按相反的顺序执行的。第一个加载器将其结果（已应用转换的资源）传递给下一个加载器，依此类推。最后，Webpack 期望由链中的最后一个加载器返回 JavaScript。 - Eric Majerus

Answer 2

官方文档已经很好地解释了这一点。不幸的是，所有必要的信息都分散在文档的不同部分。让我总结一下您需要知道的内容。

1.

确保它们按正确顺序排列（从底部到顶部）。

2.

它们是以资源文件的源代码作为参数并返回新源代码的函数。

3.

加载器可以链接在一起形成管道应用于资源上。最终加载器应该返回 JavaScript 代码；每个其他加载器可以返回任意格式的源代码，该源代码将传递给下一个加载器。

因此...

如果您有一个名为 somefile.css 的文件，并通过 loaderOne、loaderTwo 和 loaderThree 进行处理，则它们的行为就像一个常规的链接函数。

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

意思与...完全相同。

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

如果你来自grunt或gulp的世界，这可能会令人困惑。只需从右到左阅读加载器的顺序即可。

- Paweł Grzybek

---

我有一个module.loaders数组，它们的执行顺序是什么？ - Saras Arya

他们为什么要从下往上装载？ - light24bulbs

您可能需要修改答案以指定文档中的“final loader”在您的示例中是loaderOne。 - aaaaaa

@light24bulbs 这样你就可以通过简单的 .push 将额外的加载器添加到规则中，而不必担心它们的前置。 - Sarke

Answer 3

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

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

在导入前缀加上file-loader！会将导入指向该加载器。

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

- E. Sundin

---

好的，虽然我喜欢避免这种情况，因为这样你就无法在构建时决定文件是链接还是嵌入式。顺便说一下，你也可以以 !! 开头跳过任何其他加载器... - w00t

Answer 4

Webpack文档现在有这个Pitching Loaders section。如果加载器暴露了pitch函数，pitch函数的顺序将从左到右（或从上到下）。并且：

如果加载器在pitch方法中返回结果，流程将会反转并跳过剩余的加载器

- Rudy Huynh