url-loader与file-loader
一开始用url-loader的时候,想着为什么npm run build的时候,不能将图片打包到build images的目录下,原来,没有自己看这样的说明:
loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用,
limit参数,代表如果小于大约8k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录, 这样在小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。 忽略了这样的说明。
理解了这些就知道,url-loader是通过limit这样的一个值的大小,来判断,小于其值的转base64,大于其值的打包到相应的生产目录下;
而file-loader是直接将图片打包到生产目录下。
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=assets/images/[hash:8].[name].[ext]'
//limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
//name后面是打包后的路径;
//loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用
//上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。
}
url-loader与file-loader的更多相关文章
- local JSON file loader in js
local JSON file loader in js "use strict"; /** * * @author xgqfrms * @license MIT * @copyr ...
- canvas、image src、data url、blob file conversion
//canvas.toDataURL('image/jpeg'), and convert to blob,blob is a File Object. but UC don't support fu ...
- 网络资源url转化为file对象下载文件
注:只测试过网络图片资源. 一.使用org.apache.commons.io.FileUtils 二. 三.httpURLConnection.disconnect(); 四. import org ...
- 将url转化成file文件
let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,28489740 ...
- 手把手教你撸一个 Webpack Loader
文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...
- Java之类加载器(Class Loader)
JVM默认有三个类加载器: Bootstrap Loader Bootstrap Loader通常有C编写,贴近底层操作系统.是JVM启动后,第一个创建的类加载器. Extended Loader E ...
- 如何在webpack中使用loader
一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- Webpack 之 Loader 的使用
安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...
- 在Salesforce中用Data Loader去批量处理数据
Data Loader download file: Setup --> Administration Setup --> Data Loader --> Download the ...
随机推荐
- 内核定时器timer_list
内核在时钟中断发生后执行检测各个定时器是否到期,到期后的定时器处理函数将作为软中断在底半部执行.实质上,时钟中断处理程序会唤起TIMER_SOFTIRQ软中断,运行当前处理器上到期的所有定时器.lin ...
- uboot中MAC网络(待续)
start ->start_armboot ->main_loop 实际应用中问题:为什么从nandflash读出的MAC(写到物理phy上)与上层网口地址不同(上层网口采用env的mac ...
- ARM板卡ftp客户端应用
BusyBox已集成命令tftp,可通过tftp上传或下载文件: Usage: tftp [OPTIONS] HOST [PORT] Transfer a file from/to tftp serv ...
- 360浏览器兼容模式 不能$.post (不是a 连接 onclick的问题!!)
最近发现一个360浏览器很蛋疼的事情,在兼容模式下 代码: <a href="#" onclick='doAudit(1)'>审核</a> 点击没有任何效果 ...
- Restful --- 让JSON回归单纯
设计模式才是软件哲学的根本.. 一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓 ...
- kettle的报错解决机制
在kettle执行的过程中,如果遇到错误,kettle会停止运行.在某些时候,并不希望kettle停止运行,这时候可以使用错误处理(Step Error Handling).错误处理允许你配置一个步骤 ...
- 没有启动 ASP.NET State service错误的解决方法
具体错误如下: 异常详细信息: System.Web.HttpException: 无法向会话状态服务器发出会话状态请求.请确保已启动 ASP.NET State service,并且客户端和服务器端 ...
- 重复数据删除 开源实现 (deduputil) (转)
[dedup util] dedup util是一款开源的轻量级文件打包工具,它基于块级的重复数据删除技术,可以有效缩减数据容量,节省用户存储空间.目前已经在Sourceforge上创建项目,并且源码 ...
- Binding to a Service
应用组件(客户端)可以通过 bindService()方法绑定到service,Android系统随后会调用service的 onBind()方法,返回一个 IBinder 用于和service交互. ...
- apache Storm之一-入门学习
准备工作 这个教程使用storm-starter项目里面的例子.我推荐你们下载这个项目的代码并且跟着教程一起做.先读一下:配置storm开发环境和新建一个strom项目这两篇文章把你的机器设置好. 一 ...