详解webpack url-loader和file-loader

大家平时使用url-loader和file-loader的时候有没有经常遇到以下这些问题或者疑问：

1. 开发环境的时候图片路径好好的，怎么发布到线上就404了？？？或者说html里面引用的img路径是正确的，怎么到css里面路径404了？
2. 图片路径到底是怎么拼接？？？
3. 这两个到底是什么关系啊？？？
4. 怎么less里面引用的背景图片路径/import其他的less文件路径不对？？？

如果恰好你也有以上这些问题或者疑问，那正好这篇文章能给你很好的解答
注：这两个loader不仅可以处理图片，还可以处理音频，视频，字体等文件

url-loader作用

如果页面图片较多，发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl并将其打包到文件中，最终只需要引入这个dataURL就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy

file-loader作用

在css文件中定义background的属性或者在html中引入image的src，我们知道在webpack打包后这些图片会打包至定义好的一个文件夹下，和开发时候的相对路径会不一样，这就会导致导入图片路径的错误。而file-loader正是为了解决此类问题而产生的，他修改打包后图片的储存路径，再根据配置修改我们引用的路径，使之对应引入

联系

url-loader内部封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可

基本用法

由于url-loader包含了file-loader所以，file-loader内的option在url-loader中均能使用
如下为file-loader内的属性

如下为url-loader内的属性

接下来摘取几个重要的属性做说明

1. outputPath

   该属性指明我们最终导出的文件路径
   最终导出的文件路径 === output.path + url-loader.outputPath + url-loader.name

2. publicPath（常用于生成环境）

   该属性指明我们最终引用的文件路径（打包生成的index.html文件里面引用资源的前缀）
   最终引用的文件路径前缀 === output.publicPath + url-loader.publicPath + url-loader.name

3. name

   该属性指明文件的最终名称。
   同样的，我们可以直接把outputPath的内容写到name中，一样可以生成对应的路径

经过上面的说明，我们得出结论，最终的静态文件路径（图片，音频，视频，字体等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

有了上述的基础，我们通过实例来说明下开篇提出的4个问题

实例说明

打包后的文件结构

img里面的四个绿色的文件除去home-logo.png都是大于10kb的大图片，其他都是小于10kb的小图标

以上两个截图分别是开发环境和生成环境的图片引用路径

• 开发环境的时候图片路径好好的，怎么发布到线上就404了？？？或者说html里面引用的img路径是正确的，怎么到css里面路径404了？
  答：其实大家仔细想一想就能知道答案，我们在本地开发的时候都是localhost:8080/下面的根目录，所以当图片生成如下的绝对地址是不会出问题的，可是你把同样的webpack配置放到生成环境上就不一定了，因为生成环境大部分的前端静态文件都不是在根目录啊，有可能就是这样的目录结构

  www/
   +folder/
     +static/
       +css/
       +img/
       +js/
     +index.html

  这样你开发环境的绝对路径放到服务器上面自然就404了，所以要不然用相对路径，要不然就统一写死绝对路径
  （同样道理，解释为什么css里面的背景图路径404，但是这个解决起来需要用到extract-text-webpack-plugin或者mini-css-extract-plugin这个插件，前者用于webpack4以下版本，后者是4以上版本，配置options里面的publicPath）

  

• 图片路径到底是怎么拼接？？？
  答：output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name
• 这两个到底是什么关系啊？？？
  答：上面基本上都说过了，总结一句话就是相互互补的关系，url-loader不能转base64的时候file-loader来处理它
• 怎么less里面引用的背景图片路径/import其他的less文件路径不对？？？
  答：这里面的涉及的东西有点多，我打算再开一篇文章来说了

文章到这里就结束了，希望能帮助到大家
（BTW，语言组织的依旧很差）