webpack-图片处理

最新推荐文章于 2024-04-25 23:47:19 发布
最新推荐文章于 2024-04-25 23:47:19 发布
阅读量210 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45736311/article/details/118353777
版权
  • 1.保存两张图片test.jpq和timg.jpg，右击，点击属性，查看图片大小
  • 2.将这两张图片复制粘贴到项目的img文件中
    在这里插入图片描述
  • 3.将其中一张作为背景图
    在这里插入图片描述
  • 4.现在来试一下当前文件中能否应用这张图片
    npm run build指令，回车，会发现报错（因为当前没有合适的loader去处理这个文件） 在这里插入图片描述
  • 5 使用loader处理该文件（配置）
    （1）
    在这里插入图片描述
    （2）复制此行代码
    在这里插入图片描述
    （3）粘贴到指令运行区，回车，等待安装
    在这里插入图片描述
    （4）复制选中的代码，粘贴到webpack.config.js文件中
    在这里插入图片描述
    在这里插入图片描述
    这条语句的意思是：这几种图片都可以匹配
    *test:匹配
    *limit:13000 要比图片的KB数乘以1024 大
    *当图片的limit比设定的limit小时，图片就会编译成base64字符串形式；
    *比它大时就需要file-loader对图片进行加载，file-loader只需要安装就行，无需配置
    *安装file-loader：执行指令npm install file-loader --save-dev 回车
    在这里插入图片描述
  • 6 npm run build指令，回车，现在就配置好了，背景图就可以显示了
礼礼。
关注
专栏目录
webpack 图片处理和优化
ivenqin的博客
05-16 767
本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。 而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。 如何在webpack中打包图片 在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别： f
VUE2 v-for 图片不显示解决方法
FUTURE的博客
11-22 658
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 图片的处理
baidu_37183015的博客
04-11 326
webpack 图片的处理
webpack-图片文件处理
小小前端攻城狮的博客
04-01 772
资源准备阶段 示例 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函数拿到，第一个参数是内置
WebPack 图片处理
雨巷的博客
10-22 1135
WebPack 图片处理 前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。 PNG / JPG 等像素图片格式 使用 webpack 将切完的 PNG/JPG 等像素图片压缩后（tin
webpack-develop.zip
11-01
8. **静态资源处理**：Webpack通过配置能够处理静态资源，如图片和字体文件，通常会通过URL加载器将小文件内联到输出的JS中，大文件则会被复制到指定的输出目录。 9. **Vue CLI服务**：通过`npm run serve`启动的...
webpack-使用webpack-dev-middleware.rar
04-12
Webpack 是一个流行的模块打包工具，常用于前端开发，它能够将 JavaScript、CSS、图片等静态资源打包成优化过的单一或多个文件，以便于在浏览器中高效加载和运行。`webpack-dev-middleware` 是 Webpack 提供的一个...
前端开源库-style-ext-html-webpack-plugin
08-30
在前端开发中，Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS、图片等资源，并将它们整合成一个或多个优化过的输出文件。为了进一步提升Webpack的性能和灵活性，开发者经常使用各种插件来扩展其功能...
使用html-webpack-plugin’入再内存中生成 html 页面插件
12-14
在现代Web开发中，Webpack是一个强大的模块打包工具，它能够将JavaScript、CSS、图片等资源进行编译和打包。在实际应用中，我们通常需要在HTML文件中引用这些打包后的资源，例如，将主JavaScript文件（如`main.js`）...
前端开源库-webpack-virtual-modules
08-30
在前端开发中，Webpack 是一款强大的模块打包工具，它允许我们将各种类型的资源（JavaScript、CSS、图片等）转换并整合为一个或多个可部署的静态资源。随着前端应用的复杂度增加，有时我们需要在项目中创建一些不...
webpack处理图片资源（jpeg,jpg,png等）
jieyucx的博客
06-07 1768
到这里可能有的小伙伴就要问了，为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？这时可以看到dist目录下只有一张图片了，另一张被处理成了base64,以 data URI 形式内置到 js 中了。到 Webpack 里了，我们只需要简单配置即可处理图片资源。,我们添加配置之后，应该会将其转换成base64.可以看到效果还是和上次没处理base64之前一样的。在webpack5以前，我们处理图片资源通过。将小于10k的图片资源，处理成base64格式。
webpack10——处理图片
qq_36836277的博客
06-03 192
如何使用在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...
傻瓜式学习webpack（四）——图片处理
Selina_Chan的博客
11-06 948
有了前面三章的基础，利用webpack处理图片也是同理的。 一、首先你需要安装 file-loader和url-loader； 二、在你的webpack.config.js中的代码添加处理图片相关的loader，添加后如下： module.exports = { //entry 入口文件 让webpack用哪个文件作为项目的入口 entry: { index:
(掌握)webpack对图片资源的基本处理
最新发布
小余的前端博客
04-25 363
好处举例：这样自己制定规则就可以防止，打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴，完全对不上了。哈希值最好保存下来，哈希值是唯一的，防止图片不小心重复，[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）[ext]： 处理文件的扩展名(后缀名，比如.svg，.js，.html之类的)之前通过使用 url-loader，并且配置资源体积限制实现。[name]：处理文件的名称(原来图片的名字)
webpack学习之图片文件处理
weixin_44020809的博客
07-17 445
1，webpack只有打包处理js代码的功能，要想处理图片文件，必须安装loader：url-load 命令：npm install --save-dev url-loader@1.1.2 这个后面@带的是版本号，我用的webpack的版本是3.6.0，现在的webpack的版本是4.0.0，所以如果不带版本号，下载的就是默认的最新的，只能适配最新的webpack版本。 2.下载过后就要配置。如图所示，webpack.config.json中进行配置。 具体的配置看官网https://www.webpack
webpack处理图片文件
longtengg1的博客
07-13 244
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 233
过去在Webpack4时，处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，只需要简单配置即可处理图片资源。
Webpack入门(三)——图片打包
weixin_43074337的博客
08-24 379
我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。 上一节我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码，这次我将继续讲解如何使用loader将图片类型文件进行打包处理。 一、上节回顾 为了让大家思路更加明朗，我还是先将上一节结束时的目录结构和一些关键文件...
webpack 图片文件处理：url-loader和file-loader
qq_46112274的博客
02-15 1147
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:
imagemin-webpack-plugin和image-webpack-plugin
05-18
这两个插件都是用来优化图片的 webpack 插件，但是实现方式略有不同。 imagemin-webpack-plugin 会将 webpack 输出目录中的图片进行压缩和优化处理。它使用了 imagemin 库来实现图片压缩和优化，支持多种图片格式，如 PNG、JPEG、GIF 等。使用该插件需要先安装 imagemin 库。 而 image-webpack-plugin 会在打包过程中将图片转换为 base64 编码，并且生成一个单独的文件，以便浏览器可以更快地加载这些图片。该插件不需要安装其他库，因为它内置了 url-loader 和 file-loader。 总的来说，如果你需要对图片进行更加深入的压缩和优化，那么可以选择使用 imagemin-webpack-plugin；而如果你只是想将图片转换成 base64 编码以便更快地加载，那么可以选择使用 image-webpack-plugin。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

礼礼。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值