file-loader和url-loader有什么本质区别，导致它们在Webpack中应用场景不同？

本文共计466个文字，预计阅读时间需要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），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

另外，如果图片较多，会发很多github.com/webpack-contrib/file-loader

url-loader:www.jb51.net/article/122936.htm

2.loader中的参数

上面提到url-loader的参数和file-loader的参数，那么loader的参数是个什么概念呢？loader的参数用来自定义loader处理文件时的工作特性。下面以url-loader为例，介绍一下webpack的loader中的参数。