详解webpack之图片引入-增强的file-loader:url-loader


Posted in Javascript onOctober 08, 2018

前言:

本文介绍了url-loader(增强的file-loader);

url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面;从而减少服务器请求。优化性能。

url-loader解决的问题:

如果图片较多,会发很多http请求,会降低页面性能。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即可。

正文:

代码和项目目录用的还是上一篇《webpack之引入图片》。

url-loader可以看作是增强版的file-loader。

url-loader把图片编码成base64格式写进页面,从而减少服务器请求。

安装url-loader

npm i -D url-loader

配置webapck.config.js

详解webpack之图片引入-增强的file-loader:url-loader

执行 npm run build

在dist目录下面找到build成功的index.html页面。在浏览器的控制台中可以看到图片以base64的格式加载进页面。

详解webpack之图片引入-增强的file-loader:url-loader

现在我们做一些优化,如果图片大小小于50kb则以base64的格式加载,否则以图片地址方式加载。

详解webpack之图片引入-增强的file-loader:url-loader

补充:简单介绍下url-loader的配置

其实跟file-loader相比差不多,url-loader会按照配置把小于一定大小的图片以dataUrl的形式储存。

引用方式与上面相同:loader的配置如下:

{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的图片以dataurl的方式存储

}

补充一个:如何打包html文件中的图片呢?

首先安装相应的loader:

$ npm install html-withimg-loader --save-dev1

在webpack.config.js中做相应的配置:

module: {
loaders: [


{



test: /\.html$/,



loader: 'html-withimg-loader'


}

]
}

最后在入口的js文件中引入html

import '../index.html';

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

Javascript 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
You might like
PHP中for与foreach的区别分析
2011/03/09 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
校园之星获奖感言
2014/01/29 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
服务理念口号
2014/06/11 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
铁路安全反思材料
2014/12/24 职场文书
计生个人工作总结
2015/02/28 职场文书
储备店长岗位职责
2015/04/14 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Python图像处理之图像拼接
2021/04/28 Python