使用带有限制选项的 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 正在捕捉你需要的一切。 以下几个问题：

1. 在上面的 conf 文件中，file-loader 破坏了 url-loader 的行为（可能是因为我没有明确指定输出文件夹）我理解了吗？

2. 您真正需要哪些案例file-loader？

3. 哪些情况最好将两者结合使用（如果有）？

Answer 1

1. 在上面的 conf 文件中，file-loader 破坏了 url-loader 的行为（可能是因为我没有明确指定输出文件夹）我理解得很好吗？

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

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

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

1. 哪些情况下您真正需要文件加载器？

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

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

1. 在哪些情况下最好将两者结合使用（如果有）？

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