1. 下载npm包: npm install url-loader --save-dev

2. webpack.config.js中module  -> rules里添加:

 {
test: /\.(png|jpg|ico|gif)$/i,
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},

3. 如果是使用ts,那么在src下的index.d.ts 中要声明模块,不然引用可能会出现找不到模块错误

/// <reference types="react" />
/// <reference types="moment" /> declare module '*.gif' {
const value: string
export default value
}

webpack配置使用gif动图的更多相关文章

  1. 教你快速录制gif动图

    我们经常会遇到一些场景,需要你向别人展示一些操作或是效果——例如告诉别人某某软件的配置步骤啊.刚设计出来网站的动画效果怎么样啊.某某电影里面的一个镜头多么经典啊.打得大快人心的NBA绝杀瞬间是怎么回事 ...

  2. webpack配置实践

    首先我们的需求: 打包调试 提取公共代码 压缩 热替换 1.打包调试 第一步,我们在目标文件夹下安装webpack(假设已有package.json)npm i webpack@ -gcnpm i w ...

  3. js将用户上传gif动图分解成多张帧图片

    js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...

  4. 移动端(钉钉微服务)webpack配置需要移除hash来解决应用更新后白屏的问题

    钉钉微服务webpack配置调整方案 1: Vue CLI配置修改方法 a. 修改build下webpack.prod.config.js.去掉图中三处hash(.[chunkhash]): b. 修 ...

  5. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

  6. Vue.js 第5章 webpack配置

    为什么我们需要打包构建工具:因为我们以后做项目的时候,会使用到很多种不同的工具或者语言,这些工具或者语言其实浏览器并不支持 webpack 是一个现代 JavaScript 应用程序的模块打包器(mo ...

  7. Java 虚拟机系列二:垃圾收集机制详解,动图帮你理解

    前言 上篇文章已经给大家介绍了 JVM 的架构和运行时数据区 (内存区域),本篇文章将给大家介绍 JVM 的重点内容--垃圾收集.众所周知,相比 C / C++ 等语言,Java 可以省去手动管理内存 ...

  8. 用动图讲解分布式 Raft

    一.Raft 概述 Raft 算法是分布式系统开发首选的共识算法.比如现在流行 Etcd.Consul. 如果掌握了这个算法,就可以较容易地处理绝大部分场景的容错和一致性需求.比如分布式配置系统.分布 ...

  9. 『力荐汇总』这些 VS Code 快捷键太好用,忍不住录了这34张gif动图

    之前写过三篇文章,收获了极其不错的阅读量与转发量: 你真的会用 VS Code 的 Ctrl.Shift和Alt吗?高效易用的快捷键:多光标.跳转引用等轻松搞定 VS Code 中的 Vim 操作 | ...

随机推荐

  1. .NET CORE学习笔记系列(2)——依赖注入【2】基于IoC的设计模式

    原文:https://www.cnblogs.com/artech/p/net-core-di-02.html 正如我们在<控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式 ...

  2. web框架开发-Django简介

    MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...

  3. SQL语句检索数据排序及过滤

    阅读目录 一:排序检索数据 二:过滤数据 三:高级数据过滤 四:用通配符进行过滤 回到顶部 一:排序检索数据 1.1 排序数据 比如查询数据库中表数据的时候,我们使用如下语句: select * fr ...

  4. 将List按照指定大小等分的几种实现方式和效率对比及优化

    今天碰到一个需求,定时任务,批量从表里取数据并做一些其他操作然后再存表,每次取1000条,由于计算过程比较耗时所以要起多个线程同时跑,需要将List按照指定大小等分,如每100条数据起一个线程,若最后 ...

  5. go笔记-pprof使用

    go tool pprof http://localhost:6060/debug/pprof/profile go tool pprof http://localhost:6060/debug/pp ...

  6. 关于B树B+树的详细解释——绝对精彩

    B树是一种完全平衡树,B+树是B树的升级版,使用更多.B树和B+树存在的目的是如何提高磁盘文件的访问(如数据库)效率. 关于B树和B+树的一篇比较好的文章: https://www.cnblogs.c ...

  7. openstack搭建之-glance配置(9)

    一. base节点配置 #设置数据库,创建glance数据库,并设置权限 mysql -u root -proot CREATE DATABASE glance; GRANT ALL PRIVILEG ...

  8. 数据库和SQL面试题基础知识(持续更新)

    数据库方面基础知识复习 常问小问题: 一.like查询大小写问题: sql查询结果去重 SELECT distinct name FROM 表:平均数avg 一.like查询大小写问题: ①用bina ...

  9. Centos查看tomcat状态及操作

    启动:一般是执行sh tomcat/bin/startup.sh 查看:执行ps -ef |grep tomcat 输出如下 www 5144 ...等等.Bootstrap start 说明tomc ...

  10. 虚拟机系统安装Messenger和Server

    YCD对支持虚拟机运行Messenger和Server, 不论用哪种虚拟机安装, 请保证: 确认DirectX和Direct 3D组件已经开启 为虚拟机分配显卡计算资源 如果不满足以上条件, 虚拟机上 ...