webpack学习(五)-图片资源打包

鱼鱼大仙的猫 9/7/2020 webpack

# 项目结构

05图片资源打包
    -build
    -src
        --index.js
        --index.less
        --index.html
    -webpack.config.js
    -package.json

1
2
3
4
5
6
7
8

# index.html

在 index.html 中引入几张图片。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="./head.jpg" alt="jiahuan">
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# index.less

在 index.less 中写入图片样式。

#box1 {
    width: 100px;
    height: 100px;
    background-image: url('./head.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#box2 {
    width: 200px;
    height: 200px;
    background-image: url('./1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#box3 {
    width: 300px;
    height: 300px;
    background-image: url('./2.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

将 index.less 文件引入 inex.js中。

# webpack.config.js

webpack 本身对于图片没有办法进行处理，对于图片资源，我们需要引入 url-loader 和 file-loader 来进行处理，另外，引入图片还可以通过方式引入，所以我们还需要引入 html-loader 来处理html文件里引入的图片

module.exports = {
    ...
    ...
    module: {
        rules: [
            // 处理less文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 使用 url-loader file-loader 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 限制：图片大于8KB，会使用bash64进行处理，这样的优点是减少请求数量，减少服务器压力，缺点是图片体积会增大，文件请求速度更慢。
                    limit: 8*1024,
                    // 由于url-loader默认使用es6模块化解析，而html-loader以commonJs引入图片，解析时可能会出问题（[object Module]），所以我们需要关闭url-loader的es6模块，使用commonJs解析
                    esModule: false,
                    // 重命名图片
                    // [hash:10] 取图片hsah值得前10位
                    // [ext] 取文件自身的扩展名
                    name: '[hash:10].[ext]'
                }
            },
            // 处理html引入的图片，负责引入图片，从而让图片可以被url-loader处理。
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

配置完成之后，我们可以使用 webpack 命令进行打包，得到结果。