小白入门（让webpack处理图片资源）

CodeGuruInk

已于 2024-01-15 09:33:07 修改

阅读量572

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： webpack 前端 node.js

于 2024-01-02 20:51:01 首次发布

本文链接：https://blog.youkuaiyun.com/aabbbccc6788123/article/details/135332354

本文介绍了Webpack5如何简化图片资源处理，包括内置的file-loader和url-loader，以及如何配置数据URL条件以优化小于10KB的图片。同时提到了生成器选项用于整理打包后的图片文件结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Webpack4时，我们要处理图片资源也要通过file-loader和url-loader进行处理

在Webpack5时，已经将两个Loader功能内置到Webpack里面了，我们只需要简单的配置

1.准备文件

准备三张图片，最好是有一张图片是小于10kb,下面扩展需要

编写css文件

.box1,.box2,.box3{
    width: 100px;
    height: 100px;
    background-size: cover;
}
.box1{
    background: url(../images/head_z.png);
}
.box2{
    background: url(../images/i_close.png);
}
.box3{
    background: url(../images/logo.png);
}

编写html文件

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

在配置文件添加

//处理图片资源
/

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CodeGuruInk

关注关注

13
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Webpack5 教程(3)--处理图片资源

每天都要努力学习哦~~

01-18

1485

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了（注意：需要将上次打包生成的文件清空，再重新打包才有效果）现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。（注意：需要将上次打包生成的文件清空，再重新打包才有效果）开发中可能还存在一些其他资源，如音视频等，我们也一起处理了。打开 index.html 页面查看效果。

webpack 图片处理和优化

ivenqin的博客

05-16

832

本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。如何在webpack中打包图片在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别： f

参与评论您还未登录，请先登录后发表或查看评论

webpack处理图片资源

qq_45569925的博客

12-16

579

过去在Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理。现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。

webpack打包学习

最新发布

chestnut_orenge的博客

06-04

1176

在这种情况下，使用import或者require的资源文件所处的目录被认为是上下文目录。在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库。我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置。会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找。默认值是[ '.wasm','.mjs','.js','.json' ];我们也可以编写其他的.vue文件来编写自己的组件。我们还可以给它配置别名，给常见的路径起一个别名。

【Webpack】处理图片资源详解

lph159的博客

09-22

1353

Webpack 是一个现代 JavaScript 应用程序的打包工具，通过创建依赖图将项目中的各种模块（JavaScript、CSS、图片等）打包成浏览器可用的文件。对于处理图片资源，Webpack 提供了强大的加载器和插件，能够帮助开发者高效地管理和优化图片。

webpack处理图片资源（jpeg,jpg,png等）

jieyucx的博客

06-07

2241

到这里可能有的小伙伴就要问了，为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？这时可以看到dist目录下只有一张图片了，另一张被处理成了base64,以 data URI 形式内置到 js 中了。到 Webpack 里了，我们只需要简单配置即可处理图片资源。,我们添加配置之后，应该会将其转换成base64.可以看到效果还是和上次没处理base64之前一样的。在webpack5以前，我们处理图片资源通过。将小于10k的图片资源，处理成base64格式。

小白学习webpack

08-11

5. 添加加载器和插件：webpack 使用加载器来处理不同类型的文件，例如 JavaScript、CSS、图片等。你可以使用不同的加载器来处理这些文件。同样，你也可以使用插件来扩展 webpack 的功能。在配置文件中添加所需的加载...

《Vue入门到精通系列之三》--- webpack详解

2301_82244343的博客

04-20

1315

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？

Webpack4.0 打包工具基本操作教程小白篇

Zeus

04-24

609

前言我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。总结网页加载速度慢，因为我们要发起很多的二次请求要处理错综复杂的依赖关系如何解决合并、压缩、精灵图、图片的Base64编码 requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系 webpack是什么呢 webpack 是前端的一个项目...

webpack的学习复习笔记，包括（webpack使用、webpack配置、webpack服务器等）

weixin_60896381的博客

07-07

786

本文包含 webpack 使用等内容，参考于黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（webpack使用、webpack配置、webpack服务器等）

webpack-处理图片等其他资源

wingchiehpih的博客

01-12

381

webpack-处理图片等其他资源文章目录webpack-处理图片等其他资源1、file-loader2、url-loader 1、file-loader 处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；安装：npm install file-loader -D 引入图片资源方式： require("../img/ali.png

webpack处理图片文件

longtengg1的博客

07-13

294

webpack处理图片文件，在webpack.dev.js和webpack.prod.js中分开写的 1、在webpack.dev.js中直接引入图片 url rules: [ { test: /\.(png|jpg|jpeg|gif)$/, use: 'file-loader' } ] 2、在webpack.prod.js中直接引入图片 url对于线上是不友好的，在

webpack快速入门-处理图片资源

温情

09-04

315

过去在Webpack4时，处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，只需要简单配置即可处理图片资源。

webpack-图片处理

weixin_45736311的博客

06-30

253

1.保存两张图片test.jpq和timg.jpg，右击，点击属性，查看图片大小 2.将这两张图片复制粘贴到项目的img文件中 3.将其中一张作为背景图 4.现在来试一下当前文件中能否应用这张图片 npm run build指令，回车，会发现报错（因为当前没有合适的loader去处理这个文件） 5 使用loader处理该文件（配置）（1）（2）复制此行代码（3）粘贴到指令运行区，回车，等待安装（4）复制选中的代码，粘贴到webpack.config.js文件中这条语句的意思是：这.

WebPack 图片处理

雨巷的博客

10-22

1231

WebPack 图片处理前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。 PNG / JPG 等像素图片格式使用 webpack 将切完的 PNG/JPG 等像素图片压缩后（tin

VUE2 v-for 图片不显示解决方法

FUTURE的博客

11-22

727

VUE CLI4.x v-for 图片不显示解决方法 <div> <ul> <li v-for="item in items"> <img :src="item.src"> {{item.id}} </li> </ul> </div> <script> export default{ data(){ return{ items:[{ src:'../im

webpack 图片文件处理：url-loader和file-loader

qq_46112274的博客

02-15

1208

1、webpack 图片文件处理 1.1、图片文件处理方式一：url-loader 1.2、图片文件处理方式2：file-loader 1.3、图片文件处理-修改文件名称 2、安装loader 安装图片文件处理loader的参考文档 npm install --save-dev url-loader@1.1.2 3、配置 { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options:

webpack-图片文件处理

小小前端攻城狮的博客

04-01

809

资源准备阶段示例 1.安装依赖 npm install --save-dev url-loader npm install --save-dev file-loader 2.配置webpack.config.js //导入path模块 const path = require('path'); module.exports = { entry: './src/main.js', output: { //path是通过node模块的path.resolve函数拿到，第一个参数是内置

webpack10——处理图片

qq_36836277的博客

06-03

220

如何使用在webpack使用图片，以及如何打包我们的图片图片引入方式 1）在js中创建图片来引入 2）在css引入图片background(‘url’) 3) 1.在js中创建图片来引入（1）在index.js中写入以下代码 import logo from ‘./gogo.jpg’ let image = new Image(); image.src = logo //这里写图片的路径 do...