使用带有限制选项的 url-loader 时，是否有任何理由使用 file-loader？

Question

使用 webpack-4

据我所知，如果您设置限制选项（它在后台使用它），url-loader 将具有与文件加载器相同的行为，我注意到我的图像加载是当我使用下面的 conf 时坏了

{test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2|png|svg)$/, use: 'url-loader?limit=10000'}

{test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2|png|svg)$/, use: 'file-loader'}

当我删除 file-loader 时，它工作正常， url-loader 正在捕捉**你需要的一切。下面几个问题：

在上面的配置文件中，文件加载器破坏了 url-加载器的行为（可能是因为我没有明确指定输出文件夹）我理解得很好吗？
你真正需要什么案例file-loader？
什么情况下最好将两者结合（如果有）？

Answer 1

In the conf above file-loader is breaking url-loader behavior (probably because I don't clearly specify the output folder) Am I understanding it well ?

当定义两个加载器时，您将拥有两者的行为，即当所有文件的大小小于 10000 字节时，将所有文件就地编码为 base64 字符串，并将它们全部复制到您的分发目录中。

如果您想要的行为是在大小 < 10000 字节时编码为 base64 或在大小 > 10000 字节时复制到分发文件夹，那么您删除 file-loader 加载程序声明是正确的。

因为 url-loader 有一个 fallback 选项，它的默认值为 file-loader，如果目标文件相同，则不需要第二个 file-loader 声明每个装载机。

what are the cases you really need file-loader ?

每当您想将文件复制到您的 dist 目录并引用该文件在 public 路径中的位置时（静态资源将从中提供；publicPath webpack conf。属性) 在你的捆绑应用程序中。例如，如果您配置 file-loader 复制图像并将它们命名为 [hash].[ext]，您可以这样做：

const img = require('avatar.jpg')
console.log(img) // => /public/[hash].jpg

what are the cases when it's good to do a combination of both (if any) ?

如果您有总是要复制的文件 (file-loader) 和您可能希望编码到捆绑文件中的文件 (url-loader)，请同时使用。小心不要使用两个加载器定位相同的文件类型，否则您可能会复制文件，这些文件也正在使用 url-loader.

编码到您的包中

使用带有限制选项的 url-loader 时，是否有任何理由使用 file-loader？

Is there any reason to use file-loader when using url-loader with limit option?

webpack

webpack-4