第五节:Webpack打包图片资源

前言:*处理图片资源说明

1. 需要使用到url-loader处理图片
2. 注意url-loader依赖于file-loader,因此安装时注意.两个都要安装

1. 处理在样式文件中引入的图片

说明:

1. 样式中引入图片就是通过background-image属性来引入背景图片
2. 接来下我们以在.less文件中为例了解webpack如何打包图片资源

1.1 在less中引入图片

创建less文件,开发样式并使用背景图片

代码如下:

#box1{
    width: 100px;
    height: 100px;
    background-image:url("../img/vue.jpg");
    background-repeat: no-repeat;
    background-size: 100% ,100%;
}

#box2{
    width: 200px;
    height: 200px;
    background-image:url("../img/react.jpg");
    background-repeat: no-repeat;
    background-size: 100% ,100%;
}
#box3{
    width: 300px;
    height: 400px;
    background-image:url("../img/angular.png");
    background-repeat: no-repeat;
    background-size: 100% ,100%;
}

1.2 配置webpack

在webpack配置文件webpack.config.js中配置打包图片的loader

配置代码如下:

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        filename : "bundle.js",
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules:[
            {
                test: /\.less$/,
                // 多个loader, 使用use配置 
                use:["style-loader","css-loader","less-loader"]
            },
            {
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader处理, 用loader配置
                // 注意url-loader依赖file-loader
                // 因此两个loader都需要安装
                loader: "url-loader",

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode:"development"
}

示例说明:

1. 在需要使用多个loader处理文件时,需要使用use配置项
2. 如果只需要一个loader处理文件,则可以使用loader配置项配置

注意事项:

1. 如果控制台提示不能识别id选择器的#号,或者class选择器的.时
2. 我们就需要在导入less或css文件是,将loader配置进去
3. 例如import "style-loader!css-loader!./index.less"

2. 图片打包配置

2.1 示例结果分析

1. 打包后,发现所有的图片都会打包成为base64图片
2. base64图片的优点: 减少服务请求次数,减轻服务器压力
3. base64图片的缺点: 图片的体积会变大, 文件的加载速度会变慢
4. 因此我们要综合考虑, 体积比较小的图片打包为base64,图片太大的图片,就不打包为base64

因此我们并不需要所有的图片都打包为base64图片,

所以我们需要对url-loader进行配置.

低于设置大小的图片打包为base64图片, 超过设置大小的图片不打包为base64图片

2.2 配置url-loader

通过options来配置图片打包的loader

示例:

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader处理, 用loader配置
                loader: "url-loader",
                options:{
                    // 配置图片打包loader 
                    // 图片大小低于8kb的会打包为base64格式,
                    // 超过的处理为文件格式
                    limit: 8 * 1024
                }
            }
        ]
    },
    // ...
}

2.3 配置打包后文件名的长度

上面的打包后发现,图片的名字都非常长,

我们也可以通过options配置图片文件名的长度

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader处理, 用loader配置
                loader: "url-loader",
                options:{
                    // 配置图片打包loader 
                    // 图片大小低于8kb的会打包为base64格式,
                    // 超过的处理为文件格式
                    limit: 8 * 1024,

                    // 给图片进行重命名
                    // [hash:8] 是取图片打包的hash名的前8位
                    // [ext] 取图片原来的文件扩展名
                    name: '[hash:8].[ext]'
                }
            }
        ]
    },
    // ...
}

注意:

上面的配置只能处理CSS或者less等样式文件中引入的图片

默认不能处理html通过img标签引入的图片

3. 处理html文件引入的图片

3.1 处理html文件引入图片的说明

1. 因为html文件时使用http-webpack-plugin插件将内容插入到打包后的html文件中
2. 所以我们在html文件中引入的图片路径在处理后不会发生改变
3. 因此打包后html文件就找不到图片,所以显示不了图片呢

故而我们需要对html文件进行打包配置

3.2 配置html文件的loader

通过html-loader处理html中引入的图片

下载loader

$  yarn add html-loader -D

配置loader

module.exports = {
    // ...
    module:{
        rules:[
            // ...
            {
                test: /\.html$/,
                // 使用html-loader处理html文件中引入的图片
                // html-loader是专门处理img图片,引入img,从而被url-loader处理
                loader:"html-loader"
            }
        ]
    },
    // ...
}

注意: html-loader专门处理html文件中img标签引入的图片