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：

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);

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]"
				}
			}

打包子后文件

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

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

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