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做了两件事情：

1. 把图片复制到了输出目录(dist)中
2. 自动处理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更改一下来试试效果