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中的参数。

首先看下面的例子：

module.exports = { // 入口文件路径，__dirname是根目录 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.jpeg$/, use: [ { loader: 'url-loader', options: { limit: '1024' } }, ] } ] } }

其中，url-loader的配置中的options属性表示的就是url-loader的参数，还有一种等价的写法：

{ test: /\.jpeg$/, use: 'url-loader?limit=1024 }

如果有多个参数，就用 ‘&' 连接起来。和github.com/KIDFUCKER/webpack-demo.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。