走近webpack(3)--图片的处理
上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。
首先,咱们随便找一张你喜欢的图片放到src/images目录下,然后把图片设置为背景图片,代码是这个样子。
src/index.html:
<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<script src="./entry1.js"></script>
<script src="./entry2.js"></script>
src/css/index.css:
body{
background:red;
}
#title{
background:orange;
color:blue;
}
#img{
background: url(../images/dog.jpg);
width: 500px;
height: 500px;
}
ok,我们写完了代码,现在webpack是无法解析的,我们可以打包试一下,发现会报错。嗯,没有加入loader肯定会报错的!
那么,接下来我们来安装一下打包图片需要用到的loader:
npm install --save-dev file-loader url-loader
在等待安装之际,我们先解释一下这两个loader分别都是做什么的:
file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。其实简单来说,url-loader的作用就是根据配置来判断图片是否需要转换成字符串编码,来使项目的性能和速度更快。
那么,接下来我们在module中配置一下loader,现在我们的module看起来是这样的,其中limit参数就是用来判断需要把图片转换成字符串编码的大小范围,单位是B。
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},
唉?不对啊,你安装了两个loader,为什么只用了url-loader啊?!因为url-loader内置了file-loader。这里安装file-loader是为了方便下面用到的时候不用再安装了。
OK,咱们来打包一下看看会发生什么吧。打开页面发现我们引入的图片已经显示了。
下面说一下怎么把css从js中分离出来,我们上面的css都是通过import引入到js中再进行打包的,这样不利于维护,也违背了js,css,html互相分离的基本原则。但是一旦分离了css,那么原本的图片路径就会出现问题。我们下面来解决一下。但是webpack官方认为css就应该打包进js中以减少http请求。所以,仁者见仁智者见智,怎么做看具体情况来选择吧。
其实要解决这个问题很简单,用插件,extract-text-webpack-plugin。怎么安装就不说了,已经说了好多遍了,跟上面的安装方法一样,改个名字而已。
既然是插件,我们就需要在config中引入并且new一个实例之后才可以使用:
module:{
rules: [
{
test: /\.css$/,
/*修改了一下使用的方式*/
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},
//插件,用于生产模版和各项功能
plugins:[
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html' }),
/*这里new了一个插件的实例*/
new extractTextPlugin("css/index.css")
],
ok,我们兴致勃勃地去打包一下,竟然报错了,报错的主要原因是extract-text-webpack-plugin当前还没有支持webpack4.x,那么我们该怎么办呢?别急,咱们想想办法解决:
npm install --save-dev extract-text-webpack-plugin@next
/*更新版本*/
这样就可以打包了,但是我们打包完成之后发现index.html并没有引入相应的css,页面没有任何css,别急,我们来进行下一步解决这个问题。
我们在config中定义一个路径变量:
var webpath={
publicPath:"http://192.168.199.124:9090/"
}
/*就是你在devServer中定义的host和端口*/
然后在output属性中定义一个publicPath属性:
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js',
publicPath:webpath.publicPath
},
并且要把之前配置在devServer中的host修改成你自己的本机host,我的是http://192.168.199.124,如果你不知道,可以在cmd中使用ipconfig来查询。
然后,我们npm run server一下,发现打开的页面已经有图片和样式了。
那么我们就学会了如何处理css中的图片问题,下面我们学习一下如何处理html中的图片(也是用插件,各种插件,你可以去github随便找一个你喜欢的可以处理这中问题类型的插件):
这里我们使用html-withimg-loader,然后在config中如下配置:
npm install html-withimg-loader --save
/*因为在生产环节中也需要用到,所以使用--save命令*/
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
完事了。。。。。。简单吧。
前边的内容,打包后的图片并没有放到images文件夹下,要放到images文件夹下,其实只需要配置我们的url-loader选项就可以了。前面也说到了,要限制limit的大小,不然图片在小于limit的范围内会进行转码,咱们来小小的修改下代码就可以了:
{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500,
outputPath:'images/'
}
}]
}
我们在src/index.html中加入一个图片的引入:
<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<!-- 通过src引入图片 -->
<img id="htmlImg" src="./images/dog.jpg">
然后在src/css/index.css下写上这样的css:
body{
background:red;
}
#title{
background:orange;
color:blue;
}
#img{
background: url(../images/dog.jpg);
width: 500px;
height: 500px;
}
/*设置图片大小*/
#htmlImg{
width: 500px;
height: 500px;
}
然后我们npm run server一下看看结果吧。这里说明一下,可能细心的小伙伴会问,为什么以前打包用npm run build 而这里用npm run server呢?
通常情况下,我们有两种环境,一种是dev,一种是prod,也就是开发环境和生产环境,一般在开发环境下,我们本地会通过webpack-dev-server通过express起一个node服务器,而不是真正的打包,而我们以前所一起学习的webpack使用方法即包含了开发环境下的需求,又有生产环境下的内容,当我们要把整个项目打包上线的时候,我们会压缩js,压缩图片,整合资源以减少http请求,但是我们在开发环境下的时候,往往需要更多的功能以使代码更容易阅读和debug。再有就是,我们在引入图片的时候,用的是绝对地址,也就是node起服务器后你本地的ip地址,如果不通过npm run server起本地服务器,是无法找到图片的。有兴趣的小伙伴可以试试npm run build然后手动打开dist下的html看看效果。
至此,图片的处理方式就结束了。下一章咱们来看看怎么处理less啊,sass这样的css预编译语言,毕竟现在很少用css来写样式了。
走近webpack(3)--图片的处理的更多相关文章
- 走近webpack(0)--正文之前的故事
在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- 走近webpack(1)--多入口及devServer的使用
上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的. const path = require('path'); module.exports= ...
- webpack 编译图片文件 file-loader
1.安装插件 npm i file-loader --save-dev npm i url-loader --save-dev npm install image-webpack-loader - ...
- 关于webpack打包图片的路径问题
在webpack打包的时候,用css-loader的时候,在css文件里用的引用的背景的图片的时候,如果是url()...那么里面的路径不能用相对路径,得用绝对路径,而且必须是带http的,幸好,,, ...
- 如何使用webpack 打包图片
最近在学习vue,需要用到webpack打包css,在webpack中文网https://www.webpackjs.com/里只有css的打包配置, 在编写css样式时,因为要引入 背景图片,打包时 ...
- webpack压缩图片之项目资源优化
webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作.对于比较大的图 ...
- 走近webpack(2)--css打包及压缩js
前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...
- 走近webpack(4)--css相关拓展
我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...
随机推荐
- C/C++使用MySQL
一直找不到关于C/C++连接Mysql数据库的详细api书籍和网站,刷了下网页,找到一篇Linux 下C/C++连接数据库的博客,留着以后自己用. 首先需要编译.安装MySQL,安装完成后,将MySQ ...
- 使用sql语句获取数据库表的信息
下面的sql语句可以查看表的信息.其中modify_date和create_date可以根据表的修改时间来查看.如果不需要删除后,就能看到所有表的字段信息 ) PERCENT d.name AS 表名 ...
- 1.3 PCI总线的存储器读写总线事务
总线的基本任务是实现数据传送,将一组数据从一个设备传送到另一个设备,当然总线也可以将一个设备的数据广播到多个设备.在处理器系统中,这些数据传送都要依赖一定的规则,PCI总线并不例外. PCI总线使用单 ...
- freemarker获取封装类中对象的属性
freemarker获取封装类中对象的属性 1.设计思路 (1)封装学生类 (2)创建数据模型 (3)新建student.ftl (4)运行Junit测试文件,生成HTML文件 2.封装学生类 Stu ...
- 解析XML的方法
解析XML的方法 1.DOM生成和解析XML 2.SAX生成和解析XML 3.DOM4J生成和解析XML 4.JDOM生成和解析XML
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- HALCON学习-资料
HALCON学习网: http://www.ihalcon.com/ 学习资料推荐博客: http://k594081130.blog.163.com/blog/static/218359013201 ...
- 微信小程序hidden
首先hidden默认在display:block;情况下是会默认生效的: but在很多时候只在初始值下有效, 在data下声明 flag:true; 方法中: 无效,所以尽量不要使用hidden这个属 ...
- 实例 编辑 .bashrc(不断更新)
.bashrc 是/root下的隐藏文件,可按习惯编辑命令的别名. vi .bashrc alias rm='rm -i'#alias cp='cp -i'alias mv='mv -i'alias ...
- 如何从Eclipse 迁移到Android Studio 且保持Eclipse项目结构
本文demo下载:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=531 Android项目 Eclipse与A ...