详解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，语言组织的依旧不好）