详解webpack url-loader和file-loader

wens

大家平时使用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内的属性

clipboard.png

如下为url-loader内的属性
clipboard.png

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

  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个问题

实例说明

clipboard.png

打包后的文件结构

clipboard.png

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

clipboard.png

clipboard.png

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

  • 开发环境的时候图片路径好好的,怎么发布到线上就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)

    clipboard.png

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

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

阅读 12.1k
245 声望
4 粉丝
0 条评论
245 声望
4 粉丝
文章目录
宣传栏