当使用带有限制选项的url-加载程序时，是否有任何理由使用文件加载程序？

Question

webpack-4

据我所知，如果您设置了限制选项(它在引擎盖下使用)，url-加载程序将具有与文件加载器相同的行为，我注意到当我使用下面的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中，文件加载程序破坏了url-加载程序的行为(可能是因为我没有明确指定输出文件夹)，对此我理解得很好吗？
2. 您真正需要file-loader的案例是什么？
3. 如果将两个结合起来(如果有的话)，那么的情况是什么呢？

Answer 1

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

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

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

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

1. 你真正需要的是什么文件加载程序？

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

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

1. 如果两者兼而有之(如果有的话)，那么是什么情况呢？

如果您始终希望复制(file-loader)的文件和您可能希望将其编码到您的包文件(url-loader)中的文件，请使用这两种方法。请注意，不要在两个加载程序中以相同的文件类型为目标，否则您可能要通过url-loader将也正在编码的文件复制到包中。