webpack处理媒体文件(图片/视频和音频)
webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,
这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
// loader: 'url-loader?name=images/[name].[ext]',
loader: 'url-loader',
options: {
limit: 10,
name:'imgs/[name].[ext]'
}
},
{
test: /\.(mp3)(\?.*)?$/,
loader: 'url-loader',
options: {
name:'audios/[name].[ext]',
limit:10
}
}
这样处理的图片就可以在目标文件夹中直接生成对应的文件被引用
但是需要注意的是,在index.html中引入的图片需要在入口文件中import
而在组件中引用图片直接在img中填入src就可以了
webpack处理媒体文件(图片/视频和音频)的更多相关文章
- Android开发 多媒体提取器MediaExtractor详解_将一个视频文件分离视频与音频
前言 此篇博客讲解MediaExtractor将一个视频文件分离视频与音频,如果你对MediaExtractor还没有一个笼统的概念建议先了解我的另一篇入门博客:https://www.cnblogs ...
- C# 处理文件,视频,音频,压缩包下载
文章介绍了通过HttpWebRequest和HttpWebResponse实现视频下载的功能:首先HttpWebRequest类利用HTTP 协议和服务器交互,再由HttpWebResponse返回来 ...
- FFmpeg命令行工具学习(三):媒体文件转换工具ffmpeg
一.简述 ffmpeg是一个非常强大的工具,它可以转换任何格式的媒体文件,并且还可以用自己的AudioFilter以及VideoFilter进行处理和编辑.有了它,我们就可以对媒体文件做很多我们想做的 ...
- h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
- WP8.1开发中关于媒体(图片)文件的生成操作,属性如何设置(内容/嵌入资源等);
(转载)WindowsPhone问题笔记-- 正确选择build action 解决媒体资源无法读取问题 链接:http://www.cnblogs.com/qinxg/archive/2012/07 ...
- Java 利用缓冲字节流来实现视频、音频、图片的复制粘贴
InputStream:继承自InputStream的流都是用于向程序中输入数据的,且数据单位都是字节(8位). OutputSteam:继承自OutputStream的流都是程序用于向外输出数据的, ...
- 我的Android进阶之旅------>Android使用正则表达式匹配扫描指定目录下的所有媒体文件(音乐、图像、视频文件)
今天使用正则表达式匹配指定目录下的所有媒体文件,下面将这份代码简化了,可以收藏下来,当作工具类. package match; import java.io.File; import java.uti ...
- Python玩转各种多媒体,视频、音频到图片
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
- Java 添加 、读取以及删除PPT幻灯片中的视频、音频文件
在PPT中,可以操作很多种元素,如形状.图形.文字.图片.表格等,也可以插入视频或者音频文件,来丰富幻灯片的内容呈现方式.下面将介绍在Java程序中如何来添加视频.音频文件到PPT幻灯片,读取和删除幻 ...
随机推荐
- 008-spring cache-缓存实现-03-springboot redis实现
1.window下redis安装 https://www.cnblogs.com/bjlhx/p/7429811.html 2.pom <!-- 缓存 --> <dependency ...
- PowerTCP FTP for .NET 在线e文文档
http://www.dart.com/help/ptftpnet/webframe.html
- System.getProperty("user.dir")
/**获得当前类的完整路径.最后一句*/package test;import java.net.MalformedURLException;import java.net.URI;import ja ...
- 向数据库中添加数据,通过se16 不能添加,通过 代码可以添加的原因
1: 在向数据库中添加数据时,通过客户端se16 准备对 数据表进行添加数据,提示如下: 找了以下原因,如下: https://www.baidu.com/link?url=3yRtAfY1_9XG ...
- Scala的apply unapply unapplySeq 语法糖
apply 可以理解为注入 unapply unapplySeq 可以理解为提取 apply 与 unapply 虽然名字相近,但是使用起来区别挺大.apply有点像构造函数unapply主要是结合模 ...
- 密码登录源码(jsp+java+数据库)
jsp界面: <%@ page language="java" contentType="text/html; charset=utf-8" pageEn ...
- asp.net拦截器
一 拦截器又称过滤器. asp.net mvc本身是自带3种拦截器:Action拦截器.Result拦截器.Exception拦截器. 应用中常见的拦截器有日志拦截器(Action拦截器)和异常处理拦 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- install Maven
工欲善其事,必先利其器.咱们也来玩玩 Maven 这货吧!先得去下载一个. 准备工作 java开发环境(JDK) maven下载地址:http://maven.apache.org/release-n ...
- UVa-1025城市里的间谍 A Spy in the Metro
原题 城市里的间谍 分析 动态规划,dp[i][j]表示你在时刻i,车站j,最少还要等待的时间. 边界条件d[T][n]=0 已经到达,其他d[T][i]=inf不可达. 在一个站点时,有以下三种决策 ...