webpack-图片文件的处理

最新推荐文章于 2023-06-07 17:29:30 发布
最新推荐文章于 2023-06-07 17:29:30 发布
阅读量181 收藏
点赞数
分类专栏： Vue 文章标签： vue webpack loader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46071321/article/details/112006528
版权
本文详细介绍了如何在Webpack项目中配置url-loader和file-loader处理图片资源。当图片大小超过limit时，使用file-loader进行打包，并通过hash值避免命名冲突。在webpack.config.js中进行配置，包括修改图片的输出路径和文件名。最后，讨论了在实际开发中对打包图片名字的要求，如保持部分原始名称和扩展名。
摘要由CSDN通过智能技术生成

如果直接执行npm run build:
在这里插入图片描述读一下，意思大概是：你需要一个适当的loader来处理这个文件。
所以先下载loader,这里注意一定要下载和webpack版本对应的loader,下面还要下载很多东西，@XXX，都是下载的对应版本。

1.下载处理图片的url-loader

在这里插入图片描述

2.在webpack.config.js中进行配置

在这里插入图片描述
这个可以直接去官网复制，但是limit的默认值是8192,因为我的两张图片是9.13KB和17.31KB，如果是按默认值都会超范围，我要做的是当加载的图片大于和小于limit时的处理方式。所以把它手动改成了13000.

3.如果加载图片小于limit,直接npm run build

在这里插入图片描述

最低0.47元/天 解锁文章
♚ Painting
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-develop.zip
11-01
8. **静态资源处理**：Webpack通过配置能够处理静态资源，如图片和字体文件，通常会通过URL加载器将小文件内联到输出的JS中，大文件则会被复制到指定的输出目录。 9. **Vue CLI服务**：通过`npm run serve`启动的...
hexo图片显示问题
actor001的博客
09-28 311
Hexo图片无法正常显示问题 关于hexo上图片无法正常显示的问题，有如下解决方法： 设置站点配置_config.yml: 将post_asset_folder: false改为post_asset_folder: true 安装插件: npm install https://github.com/CodeFalling/hexo-asset-image -- save 运行hexo n "XXXXXX", 生成XXXXX.md博文时就会在/source/_posts目录下生成XXXXXX的文件
webpack学习之图片文件处理
weixin_44020809的博客
07-17 433
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-图片文件处理
小小前端攻城狮的博客
04-01 756
资源准备阶段 示例 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函数拿到，第一个参数是内置
vue 优化之图片压缩遇到的坑
Node.js安装报错 - npm -v 查看版本无效
01-25 1211
vue2.x版本 和 vue4.x版本 关于图片压缩的配置是不同的 vue2.x版本的配置文件(vue.config.js:没有自行创建),如下 module.exports = { chainWebpack: config => { config.module .rule('min-image') .test(/\.(png|jpe?g|gif)(\?.*)?$/) .use('image-webpack
HEXO博客解决图片无法显示问题
weixin_60094035的博客
01-27 777
Hexo博客解决图片插入失败无法显示问题。
webpack-test:webpack-test
07-14
Webpack 是一个流行的JavaScript模块打包工具，它允许开发者将各种资源如JavaScript、CSS、图片等组织成模块，并将这些模块按照依赖关系打包成一个或多个可部署的静态资源。在"webpack-test"项目中，我们可以看到这...
webpack-使用webpack-dev-middleware.rar
04-12
Webpack 是一个流行的模块打包工具，常用于前端开发，它能够将 JavaScript、CSS、图片等静态资源打包成优化过的单一或多个文件，以便于在浏览器中高效加载和运行。`webpack-dev-middleware` 是 Webpack 提供的一个...
webpack-demo:修复错误
05-16
- **模块（Module）**: Webpack能够处理的任何资源，比如JavaScript文件、CSS文件、图片等。 - **加载器（Loaders）**: 转换模块的工具，例如将`.jsx`转换为`.js`，或将SCSS转换为CSS。 - **插件（Plugins）**: ...
webpack-full
03-18
4. **Plugin（插件）**：扩展了 Webpack 的功能，可以在打包过程中执行更复杂的任务，例如提取 CSS 到单独文件、优化图片或处理 HTML 文件。 5. **Output（输出）**：Webpack 打包后的结果会被输出到指定目录，包括...
webpack处理图片资源（jpeg,jpg,png等）
最新发布
jieyucx的博客
06-07 1671
到这里可能有的小伙伴就要问了，为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？这时可以看到dist目录下只有一张图片了，另一张被处理成了base64,以 data URI 形式内置到 js 中了。到 Webpack 里了，我们只需要简单配置即可处理图片资源。,我们添加配置之后，应该会将其转换成base64.可以看到效果还是和上次没处理base64之前一样的。在webpack5以前，我们处理图片资源通过。将小于10k的图片资源，处理成base64格式。
WebPack 图片处理
雨巷的博客
10-22 1106
WebPack 图片处理 前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。 PNG / JPG 等像素图片格式 使用 webpack 将切完的 PNG/JPG 等像素图片压缩后（tin
webpack5基本教程-2
weixin_43484007的博客
10-11 421
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
webpack处理图片资源
m0_68997646的博客
11-01 482
webpack处理文件资源
Webpack5 处理图片资源、图标资源、修改输出目录、清空上一次打包的所有文件
weixin_52053631的博客
03-11 724
Webpack5 处理图片资源、图标资源、修改输出目录、清空上一次打包的所有文件
Webpack入门(三)——图片打包
weixin_43074337的博客
08-24 339
我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。 上一节我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码，这次我将继续讲解如何使用loader将图片类型文件进行打包处理。 一、上节回顾 为了让大家思路更加明朗，我还是先将上一节结束时的目录结构和一些关键文件...
webpack对图片文件进行打包（代码演示和讲解）
webchang的博客
01-15 4083
图片在webpack中会被当做模块，但是webpack本身无法处理图片，我们需要对应的 loader
六、webpack-图片文件的处理
唐都恩了的博客
03-11 314
先来中文网链接url-loader 安装 npm install --save-dev url-loader 配置： #1.当图片小于limint时的配置，但是当图片大于limit时打包会报错 所以还需要进一步配置 const path = require('path') module.exports = { entry: './src/min.js', //入口 output...
webpack 图片的处理
baidu_37183015的博客
04-11 313
webpack 图片的处理
imagemin-webpack-plugin和image-webpack-plugin
05-18
imagemin-webpack-plugin 会将 webpack 输出目录中的图片进行压缩和优化处理。它使用了 imagemin 库来实现图片压缩和优化，支持多种图片格式，如 PNG、JPEG、GIF 等。使用该插件需要先安装 imagemin 库。 而 image-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值