webpack最佳入门实践系列(3)
6.使用图片
6.1.尝试在css中引入图片
在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张图片
body{
background: url('../images/nodeing.jpg')
}
在index.js文件中引入app.css这个模块
import module_1 from './module_1'
import module_2 from './module_2'
import module_3 from './module_3' document.write("hello world")
import "./index.css"
import "./css/app.css" module_1()
module_2()
module_3()
在命令行中通过 npm start运行,查看结果,命令行中会报以下错误
ERROR in ./src/images/nodeing.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./src/css/app.css 6:57-89
@ ./src/css/app.css
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
通过报错信息,我们大体上知道了报错的原因,那就是webpack无法处理.jpg格式的文件,告诉我们可能需要另一个loader来处理它,我们用来处理图片的loader叫做 file-loader
6.2.使用file-loader
安装file-loader
npm install file-loader --save-dev
修改webpack.config.js配置文件,增加file-loader配置项目
const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
],
devServer: {
open: true,
contentBase: './dist'
},
module: {
rules: [
// 处理css文件的配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 处理jpg图片的配置
{
test: /\.jpg$/,
use: ['file-loader']
}
]
} }
再次通过npm start命令来运行,查看结果,我们的配置已经生效,现在webpack就已经拥有了处理jpg图片的能力了
6.3.file-loader做了哪些事情呢?
因为webpack-dev-server是打包在内存中运行的,并没有输出文件,所以,我们需要通过npm run dev命令来把文件打包出来,再去查看打包的结果,下图是打包后项目目录结构:
从图中可以看出dist目录下多了一个.jpg的文件,但是这个文件并不和我们原来的图片同名,原图为nodeing.jpg
从这里,我们知道了file-loader做了两件事情:
- 把图片复制到了输出目录(dist)中
- 自动处理url后面的文件路径,把图片重命名了,例如:9b822cdc77066b81bdde5c68936a0857.jpg,得到一个最终引用的路径
当我们试图在index.js中手动通过import引入一张图片的时候,返回的结果其实就是文件的路径:
import imgsrc from './images/nodeing.jpg'
console.log(imgsrc) //输出:9b822cdc77066b81bdde5c68936a0857.jpg
6.4.支持多种类型的图片
为了支持多种类型的图片,例如:png,gif等,我们还需要去修改一下配置文件,在file-loader配置项中增加图片类型
{
test: /\.(jpg|png|gif|bmp|webp)$/,
use: ['file-loader']
}
6.5.使用url-loader
url-loader是对file-loader的上层封装,你可以理解为是file-loader的增强版
安装url-loader
npm install url-loader --save-dev
上面我们说url-loader是对file-loader的上层封装,我们现在来测试一下,把我们配置好的file-loader项改成url-loader
{
test: /\.(jpg|png|gif|bmp|webp)$/,
use: ['url-loader']
}
然后我们通过npm start来启动服务器,通过chrome的调试工具,我们查看到,url和file-loader打包出来的不同了
body {
background: url(data:image/jpeg;base64,/9j/4Q
+6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUA…/O
+auez6MoVJxBPMdi/hSIT9Yk8OVQ/wDLCO8OXhP0boZ5ZhE09mcN4H5A3bhxjd2/FP8Af//Z);
}
我们可以看到,url已经变成了base64编码的一串字符串,那么什么是base64编码呢?
base64编码是一种基于64个可打印字符来表示二进制数据的表示方法,图片的base64编码就是可以将一副图片编码成一串字符串,使用这个字符串来代替图片地址
那么,这样做有什么意义呢?
我们所看到的网页上的每一个图片,都需要消耗一个http请求下载而来,所以有时候我们会把很多小图标合在一张图片上使用,目的就是为了减少http请求,但是不管怎样,图片的下载都是需要向服务器发送http请求的,要是图片下载不需要向服务器下载请求那就太棒了,base64编码解决的就是这个问题
接下来,运行一下打包的命令,查看一下效果
npm run dev
我们再次去查看dist目录,发现下面并没有生成新的图片,这个是因为url-loader已经把图片转成base64的字符串了,我们打开浏览器控制台,查看我们输出的图片路径:
data:image/jpeg;base64,/9j/4Q+6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAY
gEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAiAAAAcgEyAAIAAAAUAAAAlIdpAAQAAAABAAAAqAAAA
NQACvyAAAAnEAAK/IAAACcQQWRvYmUg
你会发现被编码过后的图片,会用非常长的字符串来表示,这会让你加载的文件变得非常的大,这样反而得不偿失达不到优化的效果,因此,我们需要一种方案,这种方案就是当图片非常大的时候,我们还是让它发送请求来下载,当图片比较小的时候,我们就把图片进行编码,这样就符合我们的预期了。这样的方案url-loader已经帮我们搞定了,我们需要去修改webpack.config.js中的配置
{
test: /\.jpg|.png|.gif|.bmp|.webp$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240
}
}]
}
其中,我们为URL-loader增加了配置选项limit,limit给大值是一张图片是否被编码成base64的分界线,以我们配置的10240为例,这里的单位是字节,10240是10kb,当图片小于10kb的时候会被编码成base64,当图片大于10kb就会被打包输出,我们使用的nodeing.jpg大小为64kb,所以当前limit的设置,不会将nodeing.jpg这张图片打包,大家可以把limit更改一下来试试效果
最新文章
- ZeroMQ接口函数之 :zmq_pgm – ØMQ 使用PGM 进行可靠的多路传输
- jquery属性选择器(匹配具有指定属性的元素)
- Sending e-mail
- flex布局无法自动适应的bug以及实现textarea根据内容自适应
- Unity3d_学习笔记_入门
- opencv学习笔记(三)基本数据类型
- jsp 页面 性别回显
- ios 代码截屏模糊问题解决办法
- poj 3278 Catch That Cow (广搜,简单)
- leetcode_question_102 Binary Tree Level Order Traversal
- Wakelock API详解
- cocos2dx - 控件扩展之pageview循环显示
- CSS height:100%无效
- XGBoost算法--学习笔记
- 作为小白,如何学习Web前端开发?
- 时间字符串格式化 js
- UniGui中使用Grid++Report报表控件子报表获取数据的方法
- 十二、u-boot 调试--串口修改
- hql和sql练习题
- Hadoop生态集群hdfs原理(转)