url-loader是更推荐的默认选择，它内置file-loader全部能力并支持按limit阈值智能分流：小图转Base64内联，大图交由file-loader输出文件；需安装file-loader且合理设置limit（如8192字节），配合contenthash、outputPath与publicPath确保缓存与路径正确。
直接用 url-loader 就行，它能自动处理小图转 Base64 和大图走文件输出两种情况，file-loader 单独用反而功能更少。
url-loader 是更推荐的默认选择
url-loader 内置了 file-loader 的全部能力，还多出一个关键特性：按大小阈值智能分流。它不是“二选一”的关系，而是 url-loader 在需要时会自动调用 file-loader（前提是已安装）。所以实际项目中，装一个 url-loader 并配好 limit，就能覆盖所有图片处理场景。
- 小图（≤ limit）→ 转成 Base64 字符串，内联进 JS 或 CSS，省一次 HTTP 请求
- 大图（＞ limit）→ 自动交给 file-loader 处理，生成独立文件并返回路径
- 无需额外配置 file-loader，但若指定了 limit，webpack 会在内部触发对 file-loader 的调用，此时需确保 file-loader 已安装（否则构建失败）
设置 limit 控制 Base64 转换边界
limit 是 url-loader 的核心选项，单位是字节。设为 8192 就表示 ≤ 8KB 的图片转 Base64；超过则输出文件。这个值没有标准答案，通常根据网络环境和资源类型调整：
- 图标、按钮、小装饰图（一般 < 5KB）→ 建议设 5000～10000
- 首屏关键图（如 banner）→ 可适当放宽，但不建议超过 20KB，否则 JS 包体积明显增大
- 纯展示类大图（如轮播图）→ 不适合 Base64，应让其走文件输出，避免拖慢 JS 解析
配置示例与关键细节
在 webpack.config.js 的 rules 中添加如下规则即可：
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[contenthash:8].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}]
}
注意几点：
- name 中推荐用 [contenthash:8] 而非 [hash]：内容变更才变名，利于长期缓存
- outputPath 和 publicPath 要配合使用：前者决定文件输出位置，后者决定运行时浏览器请求路径
- 如果完全不想转 Base64（比如只想要文件输出），直接删掉 limit 或设为 0，url-loader 就退化为 file-loader 行为
别把字体或 SVG Sprite 当普通图处理
字体文件（.woff/.ttf）不适合转 Base64——多数浏览器不支持内联字体的 Base64 data URL；SVG 图标若用于雪碧图或动态注入，也建议保持原始文件形式以便 CSS 精确控制。url-loader 的 limit 对这些资源同样生效，需单独配置规则避开：
- 给字体单独写 rule，用 file-loader 且不设 limit
- SVG 若需内联到 HTML，可用 svg-inline-loader；若作背景图，可保留 url-loader 但提高 limit 阈值
