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更改一下来试试效果
