webpack如何处理文件、图片

本文介绍: webpack5处理文件，通用资源类型，dataUrlCon d i t i on，type: ‘asset‘

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 在导出一个 d a t a URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

一、准备 工作

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/resourc e‘,//单独文件输出
 generator: {//配置输出文件路径和名称 img/文件路径 name 文件名，hash:6生成6位hash，e xt文件后缀
filename: “img/[name].[hash:6].[e xt]”
}

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

打包子后文件

type: ‘a sset/in line‘,//base64格式输出

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

这两种输出的优点和缺点

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

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

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

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

type: ‘asset’，更具dataUrlCon dition文件的大小，输出不同的文件

300 * 1024 就是300KB

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