webpack学习(七)打包压缩图片
使用插件webpack-spritesmith生成雪碧图
1、安装webpack-spritesmith;
npm install --save-dev webpack-spritesmith
2.配置webpack.config.js
new SpritesmithPlugin({ //生成的雪碧图本身就压缩了图片大小
src: {
cwd: path.resolve(__dirname, 'src/image/icon'), //准备合并成sprit的图片存放文件夹
glob: '*.png' //哪类图片
},
target: {
image: path.resolve(__dirname, 'dist/sprites/sprites.png'), // sprite图片保存路径
css: path.resolve(__dirname, 'dist/sprites/_sprites.css') // 生成的css保存在哪里
},
apiOptions: {
cssImageRef: "../sprites/sprites.png" //css根据该指引找到sprite图
}
}),
贴一张目录
3、执行webpack打包指令,执行后打包生成dist/sprites/文件
4、index.html文件中引入sprite.css,如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<link href="bundle.3a78e3af7afe10200470.css" rel="stylesheet"></head>
<link href="sprites/_sprites.css" rel="stylesheet"> //引用就可以了
</head>
<body>
<!--测试webpack-->
<div class="test">测试webpack</div>
<div class="test1">测试webpack1</div>
<div class="icon-a">a</div> //需要的地方来用就可以了
<div class="icon-b">b</div>
<script type="text/javascript" src="bundle-3a78e3af7afe10200470.js"></script>
</body>
</html>
合成后的sprites.png
合成后的sprites.css
.icon-a { //名称为icon+图片名
background-image: url(../sprites/sprites.png);
background-position: 0px 0px;
width: 50px;
height: 50px;
}
.icon-b {
background-image: url(../sprites/sprites.png);
background-position: -50px 0px;
width: 50px;
height: 50px;
}
.icon-c {
background-image: url(../sprites/sprites.png);
background-position: 0px -50px;
width: 50px;
height: 50px;
}
5.适用的场景
webpack学习(七)打包压缩图片的更多相关文章
- webpack学习笔记——打包后直接访问页面,图片路径错误
我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...
- Vue -- webpack 项目自动打包压缩成zip文件
这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...
- webpack学习笔记——打包js
1.新建一个入口js文件,如entry.js,代码如下: document.write("It works.") 2.然后编译 entry.js 并打包到 bundle.js(会自 ...
- vue-webpack项目自动打包压缩成zip文件批处理
为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- webpack学习(六)打包压缩js和css
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...
- webpack压缩图片之项目资源优化
webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作.对于比较大的图 ...
- iOS学习-压缩图片(改变图片的宽高)
压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...
- Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用
[首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升 ...
随机推荐
- python内置函数-compile()
python的内置函数 compile()--编译. 这个函数有什么用呢? 一个最简单的例子, 就是我们的代码, 会被解释器读取,解释器读取后的其实是字符串, 然后通过compile编译后, 又转换成 ...
- shell 脚本——判断条件
在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...
- Android开发之仿微信显示更多文字的View
最近开发需求中要模仿微信朋友圈文章的展开收起功能,网上找了找,发现都有问题,于是乎自己在前辈的基础上进行了一定量的修改,下边将源码贴出来供大家参考:1.主Activity布局文件就不粘贴了,很简单,就 ...
- Linux 的进程状态
(1)运行:当一个进程在处理机上运行时,则称该进程处于运行状态.处于此状态的进程的数目小于等于处理器的数目,对于单处理机系统,处于运行状态的进程只有一个.在没有其他进程可以执行时(如所有进程都在阻塞状 ...
- phpcms V9 默认模板文件目录结构_PHPCms教程
PHPCMSV9 默认模板目录结构 templates 框架系统模板目录 announce 公告 show.html 内容页 ...
- Windows 7 Visual Studio 2008配置OpenGL开发环境
Windows 7 Visual Studio 2008配置OpenGL开发环境 glut下载地址: http://www.opengl.org/resources/libraries/glut/gl ...
- Java和Flex整合报错(三)
1.错误描述 信息: Initializing Spring FrameworkServlet 'mvc' 11-13 23:43:42 INFO [localhost-startStop-1] or ...
- 如何开发jQuery插件
一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...
- Mac 常用快捷键
可以按下组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,需按住一个或多个修饰键,同时按快捷键的最后一个键.例如,要使用快捷键 Command-C(拷贝),请按住 Co ...
- 用自定义注解实现fastjson序列化的扩展
这篇文章起源于项目中一个特殊的需求.由于目前的开发方式是前后端分离的,基本上是通过接口提供各个服务. 而前两天前端fe在开发中遇到了一些问题:他们在处理字符串类型的时间时会出现精度丢失的情况,所以希望 ...