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 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
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之第一天
2006/10/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php自定义session示例分享
2014/04/22 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
jquery创建div 实现代码
2009/04/27 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python实现多线程网页下载器
2018/04/15 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python tkinter模版代码实例
2020/02/05 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
面试通知短信
2015/04/20 职场文书
赢在执行观后感
2015/06/16 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js