手把手教你webpack3(8)url-Loader配置简述
来源:互联网 发布:淘宝api 编辑:程序博客网 时间:2024/06/07 12:56
URL-LOADER配置简述
前注:
文档全文请查看 根目录的文档说明。
如果可以,请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里,发【Issues】。
DEMO地址
1、概述
简单来说,url-loader
的效果类似file-loader
。
优点:
可以将css文件中的图片链接,转为base64字符串,或移动到打包后文件夹;
缺点:
可配置性比file-loader
弱一些,但其实file-loader
的那些配置,一般也用不到。
2、配置
2.1、limit
名称 类型 默认值 描述 limit {Number} undefined Byte limit to inline files as Data URL使用url-loader
的唯一目的,可以说就是为了这个,效果是将文件大小低于指定值的图片,转为base64字符串。
值表示小于这个大小的图片会被转码,单位是字节(1024
即 1KB)
配置:
{ test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } } ]}
css文件:
#app { position: relative; width: 500px; height: 500px; border: 1px solid red; background: url('./logo.png') no-repeat; box-sizing: border-box;}#logo { position: relative; width: 100px; height: 100px; border: 1px solid red; background: url('./logo.jpg') no-repeat; box-sizing: border-box;}
webpack打包后效果:
url('./logo.jpg')
和
url('./logo.png')
变为
url(很长一个base64字符串)
注:
- 如果你想
.png
文件小于8kb转为base64字符串,但是.jpg
文件不管大小多少,都不转为base64字符串; - 那么就需要用
file-loader
来搬运.jpg
文件,url-loader
来搬运和转码.png
文件; - 不能尝试两次调用
url-loader
来,用两个不同的配置来同时处理两种情况; - 不过这个场景应该出现的极少。
2.2、mimetype
名称 类型 默认值 描述 mimetype {String} extname Specify MIME type for the file (Otherwise it’s inferred from the file extension)这个配置的意思呢,就是说,要不要把其他后缀名的图片文件,统一转为同一种格式的base64编码。
例如:
- 假如我有一个
logo.png
和一个logo.jpg
图片; - 那么png文件转码后的开头部分是:
data:image/png;base64,
; - 而jpg文件转码后的开头部分是:
data:image/jpeg;base64,
; - 如果配置这么写:
mimetype: 'image/png'
; - 那么开头部分将统一变为:
data:image/png;base64,
; - 另外,这个改变只是修改开头部分,但是实际大小是不影响的(当然,
jpeg
要比png
多一个字符,实际测试结果,表示差别只有这一个字符而已);
阅读全文
0 0
- 手把手教你webpack3(8)url-Loader配置简述
- 手把手教你webpack3(9)File-Loader配置简述
- 手把手教你webpack3(10)Less-Loader配置简述
- 手把手教你webpack3(11)PostCSS-Loader配置简述
- 手把手教你webpack3(5)babel-loader详细使用说明
- 手把手教你webpack3(6)css-loader详细使用说明
- 手把手教你webpack3(7)style-loader详细使用说明
- 手把手教你webpack3(4)出口(详解)
- 手把手教你webpack3(2)简单指令(npm脚本)
- 手把手教你webpack3(3)入口(多入口)entry
- 手把手教你webpack3(1)最简单的webpack实例
- webpack3最新版本配置研究(一)loader
- webpack3最新版本配置研究(二)loader
- webpack3最新版本配置研究(一)loader
- 手把手教你配置proxool
- 手把手教你配置QT
- 手把手教你配置ogitor
- 手把手教你配置duilib
- 【Point Cloud Library(PCL)入门】之简介与安装
- [acm/icpc2016ChinaFinal][CodeforcesGym101194] Mr.Panda and TubeMaster
- Unicode与ASCII
- 区间第k小 poj2104 可持久化线段树
- 漂亮的Adapter模式-体会RecyclerView的设计实现
- 手把手教你webpack3(8)url-Loader配置简述
- Spring注解方法学习笔记
- Java设计模式之责任链模式
- 第一章作业2-算法时间复杂度和空间复杂度
- 吴恩达机器学习课程(一)之梯度下降原理
- 100种数据恢复的方法?!
- C++ expected initializer before 'myfile'
- 冒泡排序
- Samba