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 ...
随机推荐
- BusyBox getty
linux的登录主要是由两个文件在控制,/usr/sbin/getty来获得用户名,并进行检查用户名是否存在,然后将用户名传递给/usr/bin/login来获取用户输入密码和检查密码是否正确. 所以 ...
- hadoop错误之ClassNotFoundException(下)
hadoop开发环境:window上eclipse+虚拟机的ubuntu13.04+hadoop-1.1.2+JDK1.7 在win7下运行hadoop-1.1.2 worldcount代码的时候出现 ...
- bootstrap首页案例
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- 如何识别Java中的内存泄漏
Java开发人员都知道,Java利用垃圾回收机制来自动保持应用程序内存的干净和健康.然而可能有人不知道的是,即使使用了垃圾回收机制,Java中仍然可能存在内存泄漏风险.如果你碰到下面的错误代码: ja ...
- github 远程仓库操作
工作中需要在github上保存项目,一个仓库中有多个分支,进行一些实验,方便后面操作. 参考链接 http://rogerdudler.github.io/git-guide/index.zh.htm ...
- 从零开始,制定PHP学习计划
7月份学习计划1-15 搭建开发环境.做个小demo 增删改查.Mysql数据库16-30号 架构设计.服务器管理.版本控制 8月份正式入手项目jquery脚本学习Thinksns开源学习.核心业务学 ...
- linux gzip 命令详解
减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用. 语法:gzip ...
- C++/CLI中class成员声明与实现分开在不同文件时必须添加namespace
以下是我的代码: //TaskConfigFile.h #pragma once using namespace System::Collections::Generic; using namespa ...
- windowmasker 标记基因组中的重复序列和低复杂度序列
下载地址:ftp://ftp.ncbi.nlm.nih.gov/pub/agarwala/windowmasker/ 在这个目录下 其中windowmasker 为linux 平台的可执行文件 win ...
- CentOS 6.5安装KVM实践
一,安装CentOS6.5,使用最小化的minimal安装二.安装完CentOS后,使用root登录配置网卡,使虚拟机可以使用外网上网 vi /etc/sysconifg/network-script ...