详解webpack url-loader和file-loader

MartinHan 发布于2019-08-23 17:08 / 2808人阅读

摘要：会将引入的图片编码，生成并将其打包到文件中，最终只需要引入这个就能访问图片了。当然，如果图片较大，编码会消耗性能。不依赖于，即使用时，只需要安装即可，不需要安装。

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

开发环境的时候图片路径好好的，怎么发布到线上就404了？？？或者说html里面引用的img路径是正确的，怎么到css里面路径404了？

图片路径到底是怎么拼接？？？

这两个到底是什么关系啊？？？

怎么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内的属性

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

outputPath

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

publicPath（常用于生成环境）

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

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，语言组织的依旧很差）

GPU云服务器云服务器 equals和区别详解 sar指标原理和详解 cookie和session详解 webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103862.html

从基础到实战手摸手带你掌握新版Webpack4.0详解一起读文档

摘要：构建构建就是把源代码转换成发布到线上的可执行代码，包括如下内容。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。将文件放入到项目中，在中新建一个放字体图标的文件夹。项目地址 github.com/wudiufo/Web… 知识点概览： Loader，HMR ,Create React App, Caching, Plug...

王军 2019-05-23 17:31 评论0 收藏0
webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上一篇听说连也能打包说到使用来加载，这一篇来讲讲如何笼统地加载其它类型的资源。源文件内容的，用于缓存解决方案。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000690...

dayday_up 2019-08-21 14:26 评论0 收藏0
webpack-loader 之 url-loader

摘要：既生瑜，何生亮人家当然不是以卖萌为生的，卖萌不可耻，但是是有它的用处的。对未设置或者小于设置的图片进行转换，以的格式被的所使用而对于大于的图片用进行解析。配置工欲善其事必先利其器。 url-loader vs file-loader 既生瑜，何生亮？人家当然不是以卖萌为生的，卖萌不可耻，但是url-loader是有它的用处的。url-loader对未设置或者小于limit设置的图片进...

zxhaaa 2019-08-21 16:57 评论0 收藏0
一个现代化的webpack工程初建

摘要：一前言文章介绍了一个现代化的项目的环境是什么样的。其中一个就是引用路径的问题。扩展将单独打包详细介绍见这是一个插件，可以简化创建文件以便为包提供服务。两种环境的配置在中都支持的配置具体的默认配置查询可以移步这里的默认设置。一前言文章介绍了一个现代化的项目的webpack4环境是什么样的。这里只是介绍了基础的功能，如果需要详细的相关只是可以去webpack官网去查阅。代码地址：gi...

MyFaith 2019-08-22 18:07 评论0 收藏0
webpack4初学习

webpack基于node，因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装，主要是由于以后介绍热更新这一部分不会报错，如果全局安装热更新就会报错，以本部分为基础依次介绍，保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm，都选择默认，...

Object 2019-08-23 14:51 评论0 收藏0