webpack如何处理文件、图片

QAEARQ2023-12-06 22:32

webpack5之前是通过，file-loader、raw-loader、url-loader处理文件

webpack5是通过使用资源模块类型（asset module type）处理文件

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

一、准备工作

src/index.js添加文件引入

复制代码

import lv from "../image/lv.jpg";
const img = document.createElement("img");
img.src = lv;
document.body.appendChild(img);

import lb from "../image/lb.jpg";
const imgs = document.createElement("img");
imgs.src = lb;
document.body.appendChild(imgs);

二、配置webpack

type: 'asset/resource',//单独文件输出

generator: {//配置输出文件路径和名称 img/文件路径 name文件名，hash:6生成6位hash，ext文件后缀

filename: "img/ $name$ . $hash:6$ . $ext$ "

}

复制代码

			{
				test: /\.(jpg|png)$/,
				type: 'asset/resource',
                generator: {
					filename: "img/[name].[hash:6].[ext]"
				}
			}

打包子后文件

type: 'asset/inline',//base64格式输出

复制代码

			{
				test: /\.(jpg|png)$/,
				type: 'asset/inline'
			}

这两种输出的优点和缺点

asset/resource：输出文件减少js文件的体积，但是增加了http的请求数量

asset/inline：将文件打包到js文件中，增加了体积

对于这两种情况，我们可以使用通用资源类型asset，根据文件的大小，将大图片打包到文件里，小的图片打包到js里

我的文件一个是280KB,一个是460KB

type: 'asset'，更具dataUrlCondition文件的大小，输出不同的文件

300 * 1024 就是300KB

复制代码

			{
				test: /\.(jpg|png)$/,
				type: 'asset',
				generator: {
					filename: "img/[name].[hash:6].[ext]"
				},
				parser: {
					dataUrlCondition: { //条件限制
						maxSize: 300 * 1024
					}
				}
			}

更加符合我们的实际开发需求