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

已于 2024-01-15 09:33:07 修改
阅读量572 收藏 6
点赞数 13
CC 4.0 BY-SA版权
分类专栏： 前端学习 文章标签： webpack 前端 node.js
于 2024-01-02 20:51:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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万优质内容无限畅学
Webpack5 教程(3)--处理图片资源
每天都要努力学习哦~~
01-18 1485
此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。（注意：需要将上次打包生成的文件清空，再重新打包才有效果）开发中可能还存在一些其他资源，如音视频等，我们也一起处理了。打开 index.html 页面查看效果。
webpack 图片处理和优化
ivenqin的博客
05-16 831
本节我们来学习如何在 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 1175
在这种情况下，使用import或者require的资源文件所处的目录被认为是上下文目录。在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库。我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置。会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找。默认值是[ '.wasm','.mjs','.js','.json' ];我们也可以编写其他的.vue文件来编写自己的组件。我们还可以给它配置别名，给常见的路径起一个别名。
【Webpack】处理图片资源详解
lph159的博客
09-22 1352
Webpack 是一个现代 JavaScript 应用程序的打包工具，通过创建依赖图将项目中的各种模块（JavaScript、CSS、图片等）打包成浏览器可用的文件。对于处理图片资源，Webpack 提供了强大的加载器和插件，能够帮助开发者高效地管理和优化图片。
webpack处理图片资源（jpeg,jpg,png等）
jieyucx的博客
06-07 2238
到这里可能有的小伙伴就要问了，为什么要只将小于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 1314
从本质上来讲，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 783
本文包含 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 1230
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...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值