乐趣区

详解webpack-urlloader和fileloader

jiezi

大家平时使用 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，语言组织的依旧很差）

退出移动版