Webpack中file-loader与url-loader有何主要差异？

本文共计459个文字，预计阅读时间需要2分钟。

1. 前言：若我们希望在页面引入图片（包括img的src和background的url），当基于webpack进行开发时，引入图片会遇到一些问题。其中一个是引用路径的问题。例如，使用background样式用url引入背景图。

1.前言

如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。