【快速搞定Webpack5】处理图片资源（四）

过去在webpack4中，我们处理图片资源通过file-loader和url-loader进行处理
现在webpack5已经将两个loader功能内置到webpack中了，我们只需要简单配置即可处理图片资源。

1、配置

新增37-38行配置

const path = require("path");

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path，专门处理路径问题
        // 文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/,     // 只检测.css文件
                use:[
                    // 执行顺序，从右到左，从下到上
                    "style-loader", // 将js中的css通过创建style标签添加到html文件中生效
                    "css-loader",    // 将css资源编译成commonJs的模块到js中
                ],     
            },
            {
                test: /\.less$/,     // 只检测.less文件
                // loader: "xxx", // 配置中只能使用一个loader，use可以多个
                use:[
                    // 执行顺序，从右到左，从下到上
                    "style-loader", // 将js中的css通过创建style标签添加到html文件中生效
                    "css-loader",    // 将css资源编译成commonJs的模块到js中
                    "less-loader",    // 将less资源编译成css
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",  // 这里使用asset相当于就是webpack4中使用了url-loader来处理
            },
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
};
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

2、添加图片资源

• src/images/1.jpg
• src/images/2.jpeg

3、使用图片资源

• src/css/index.css

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 10px;
  background-image: url("../images/WechatIMG344.jpeg");
  background-size: cover;
}
1
2
3
4
5
6
7
8

• src/less/index.less

.box2 {
    width: 150px;
    height: 150px;
    background-color:tomato;
    margin: 5px;
    border-radius: 5px;
    float: left;
    background-image: url("../images/index.jpg");
    background-size: cover;
}
1
2
3
4
5
6
7
8
9
10

5、输出资源

npx webpack
1

6、对比图片资源进行优化

官方文档 进入后搜索：parser

• 配置文件（新增39-44行配置）

const path = require("path");

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path，专门处理路径问题
        // 文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/,     // 只检测.css文件
                use:[
                    // 执行顺序，从右到左，从下到上
                    "style-loader", // 将js中的css通过创建style标签添加到html文件中生效
                    "css-loader",    // 将css资源编译成commonJs的模块到js中
                ] 
            },
            {
                test: /\.less$/,     // 只检测.less文件
                // loader: "xxx", // 配置中只能使用一个loader，use可以多个
                use:[
                    // 执行顺序，从右到左，从下到上
                    "style-loader", // 将js中的css通过创建style标签添加到html文件中生效
                    "css-loader",    // 将css资源编译成commonJs的模块到js中
                    "less-loader",    // 将less资源编译成css
                ]
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",  // 这里使用asset相当于就是webpack4中使用了url-loader来处理
                parser: {
                    dataUrlCondition: {
                        // 设置小于15k 使用base64
                        // 优点减少请求数量 缺点：文件体积变大
                        maxSize: 15 * 1024, 
                    }
                }
            },
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
};
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 效果
  

并且此时，打包后的dist文档内，也没有第二个图片。