一开始用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的更多相关文章

  1. local JSON file loader in js

    local JSON file loader in js "use strict"; /** * * @author xgqfrms * @license MIT * @copyr ...

  2. 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 ...

  3. 网络资源url转化为file对象下载文件

    注:只测试过网络图片资源. 一.使用org.apache.commons.io.FileUtils 二. 三.httpURLConnection.disconnect(); 四. import org ...

  4. 将url转化成file文件

            let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,28489740 ...

  5. 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...

  6. Java之类加载器(Class Loader)

    JVM默认有三个类加载器: Bootstrap Loader Bootstrap Loader通常有C编写,贴近底层操作系统.是JVM启动后,第一个创建的类加载器. Extended Loader E ...

  7. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  8. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  9. Webpack 之 Loader 的使用

    安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...

  10. 在Salesforce中用Data Loader去批量处理数据

    Data Loader download file: Setup --> Administration Setup --> Data Loader --> Download the ...

随机推荐

  1. 如何打一手好Log

    如果项目上过线的话,那你一定知道Log是多么重要. 为什么说Log重要呢?因为上线项目不允许你调试,你只能通过Log来分析问题.这时打一手好Log的重要性绝不亚于写一手好代码.项目出问题时,你要能拿出 ...

  2. Spark读取文件

    spark默认读取的是hdfs上的文件. 如果读取本地文件,则需要加file:///usr/local/spark/README.md. (测试时候发现,本地文件必须在spark的安装路径内部或者平行 ...

  3. linux定时任务crontab设置

    crontab是linux下的定时任务,类似于window下的计划任务: crontab -l ##查询任务列表 crontab -e ##编辑定时任务 首先准备好要执行的脚本monitor_fs.s ...

  4. 在MAC上查找和设置$JAVA_HOME

    最近升级了MAC OS,装了JDK7 for mac,在这里下载JDK7 for mac,装完之后发现在默认的路径下找不到JDK7的HOME,如下所示: $ which java/usr/bin/ja ...

  5. ★ java删除代码注释

    package com.witwicky.util; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...

  6. Windows消息队列一

    系统消息--ID范围 -0x03FF 由系统定义好的小哦啊拍下哦,可以在程序中直接使用. 用户自定义消息--ID范围0x0400-0x7FFF 由用户自己定义,满足用户自己的需求.由用户自己发出消息, ...

  7. 数据库 proc编程九

    第一种动态sql EXEC SQL EXECUTE IMMEDIATE :psql; .仅适用于非select语句 .嵌入SQL语句中不能包含输入宿主变量 void main() { EXEC SQL ...

  8. 【Java面试题】24 sleep() 和 wait() 有什么区别? 详细解析!!!!

    第一种解释: 功能差不多,都用来进行线程控制,他们最大本质的区别是:sleep()不释放同步锁,wait()释放同步缩.         还有用法的上的不同是:sleep(milliseconds)可 ...

  9. 4 kafka集群部署及kafka生产者java客户端编程 + kafka消费者java客户端编程

    本博文的主要内容有   kafka的单机模式部署 kafka的分布式模式部署 生产者java客户端编程 消费者java客户端编程 运行kafka ,需要依赖 zookeeper,你可以使用已有的 zo ...

  10. foreach使用

    1. 读取记录while($row=mysql_fetch_array($result)){$record[]=array(    'title'=>$row['title'], 'body'= ...