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

Question

使用 webpack-4

据我了解，如果您设置了限制选项(它在后台使用它)，url-loader 将具有与 file-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正在捕捉你需要的一切。
下面几个问题:

在上面的 conf 文件中，文件加载器破坏了 url-loader 行为(可能是因为我没有明确指定输出文件夹)我理解得很好吗？

您真正需要的案例有哪些file-loader ?

什么是最好将两者结合使用的情况 (如果有的话)？

Answer 1

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 字符串，并将所有文件复制到您的分发目录中。

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

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

2. what are the cases you really need file-loader ?

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

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

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

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