webpack如何处理文件、图片

最新推荐文章于 2024-06-14 16:58:44 发布

QAEARQ

最新推荐文章于 2024-06-14 16:58:44 发布

阅读量281

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qaearq/article/details/134684798

版权

webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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