webpack file-loader和url-loader的区别


Posted in Javascript onJanuary 15, 2019

1.前言

如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

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

url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

推荐文档:

file-loader: https://github.com/webpack-contrib/file-loader

url-loader: https://3water.com/article/122936.htm

2.loader中的参数

上面提到url-loader的参数和file-loader的参数,那么loader的参数是个什么概念呢?loader的参数用来自定义loader处理文件时的工作特性。下面以url-loader为例,介绍一下webpack的loader中的参数。

首先看下面的例子:

module.exports = {
 // 入口文件路径,__dirname是根目录
 entry: __dirname + '/src/main.js',
 // 打包生成文件
 output: {
  path: __dirname + '/output',
  filename: 'main.js'
 },
 
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   },
   {
    test: /\.jpeg$/,
    use: [
     {
      loader: 'url-loader',
      options: {
       limit: '1024'
      }
     },
    ]
   }
  ]
 }
}

其中,url-loader的配置中的options属性表示的就是url-loader的参数,还有一种等价的写法:

{
 test: /\.jpeg$/,
 use: 'url-loader?limit=1024
}

如果有多个参数,就用 ‘&' 连接起来。和http请求中的参数类似。正如前面介绍的,limit这个参数就是告诉url-loader,在文件小于多少个字节时,将文件编码并返回DataURL。此外url-loader还有一些用于file-loader的参数。我们知道,file-loader的作用是将文件复制到其他目录。file-loader提供了一系列参数允许我们自定义诸如输出文件、文件名规则、发布路径等特性的参数。下面介绍一下这些参数。

3.url-loader的参数

先看下配置好的代码:

module.exports = {
 // 入口文件路径,__dirname是根目录
 entry: __dirname + '/src/main.js',
 // 打包生成文件
 output: {
  path: __dirname + '/output',
  filename: 'main.js'
 },
 
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   },
   {
    test: /\.jpeg$/,
    use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
   }
  ]
 }
}

这里涉及到了4个参数:limit、name、outputPath、publicPath。其中limit已经说明过。file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数

name表示输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希。加上[path]表示输出文件的相对路径与当前文件相对路径相同,加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后,打包后文件中引用文件的路径也会加上这个相对路径。

outputPath表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/,图片被打包时,就会在输出文件夹下新建(如果没有)一个名为img的文件夹,把图片放到里面。

publicPath表示打包文件中引用文件的路径前缀,如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了。

4.安装url-loader

npm install --save-dev url-loader

5.demo

https://github.com/KIDFUCKER/webpack-demo.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
javascript闭包入门示例
Apr 30 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
Element输入框带历史查询记录的实现示例
Jan 15 #Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 #Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 #Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 #Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 #Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
You might like
PHP读取目录下所有文件的代码
2008/01/07 PHP
php导出CSV抽象类实例
2014/09/24 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
基于php实现的验证码小程序
2016/12/13 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python机器学习之神经网络实现
2018/10/13 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
抗洪抢险事迹材料
2014/05/06 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
高三复习计划
2015/01/19 职场文书
导游词怎么写
2015/02/04 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
合同审查法律意见书
2015/06/04 职场文书
警示教育片观后感
2015/06/17 职场文书
学术会议开幕词
2016/03/03 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书