# 处理图片资源
过去在 Webpack4
时,我们处理图片资源通过 file-loader
和 url-loader
进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源
# webpack可以什么都不配置
webpack5默认会处理图片资源,webpack4需要单独配置
(这里的话,把后面看了,再来理解)
但是
不配置时,webpack 的压缩小体积图片为 Base64 URL 不会触发,
配置时 小体积图片被压缩成 Base64 URL 的图片,不过该图片资源就不会在 dist输出
注意配置压缩图片时
优势:减少网络请求
劣势:(Base64 URL)增加了输出文件代码体积
# webpack配置
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
// 处理图片资源
{
// 匹配图片资源后缀名
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
],
},
plugins: [],
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
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
# type 配置概念
// 处理图片资源
{
// 匹配图片资源后缀名
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
1
2
3
4
5
6
2
3
4
5
6
type
:这个属性指定了模块的类型。在这里,它被设置为"asset"
,表示这是一个资源文件。Webpack 5 引入了几种新的模块类型,包括"asset"
、"asset/resource"
和"asset/image"
等。使用"asset"
类型,Webpack 会根据文件类型生成一个合理的处理方式。"asset"
:适用于大多数资产文件,Webpack 会根据文件类型选择合适的加载器进行处理。相当于url-loader
, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式"asset/resource"
:将资产文件作为原始源代码返回,不进行转换。"asset/image"
:适用于图像文件,可以返回一个数据URL或者一个单独的图像文件。相当于file-loader
, 将文件转化成 Webpack 能识别的资源,其他不做处理
# 压缩小体积图片为Base64 URL
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
},
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9