webpack处理图片资源(jpeg,jpg,png等)

这篇具有很好参考价值的文章主要介绍了webpack处理图片资源(jpeg,jpg,png等)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在webpack5以前,我们处理图片资源通过 file-loaderurl-loader 进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源

webpack.config.js配置

{
  test: /\.(png|jpe?g|gif|webp)$/,
  type: "asset",
},

完整代码如下:

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
      	//处理图片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

添加图片资源

webpack处理图片资源(jpeg,jpg,png等)
使用图片资源

webpack处理图片资源(jpeg,jpg,png等)
webpack处理图片资源(jpeg,jpg,png等)
执行打包命令

npx webpack

效果如下:
webpack处理图片资源(jpeg,jpg,png等)

可以看到背景图生效了,打包后的图片文件会直接放到dist目录下:
webpack处理图片资源(jpeg,jpg,png等)
对图片资源优化

将小于10k的图片资源,处理成base64格式

      {
        // 用来匹配图片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },

到这里可能有的小伙伴就要问了,为什么要只将小于10k的图片资源处理成base64呢,base64格式的图片有什么特点呢?

  1. 减少HTTP请求:将小于10k的图片处理成base64后,可以直接将图片嵌入到HTML、CSS或JS文件中,避免额外的HTTP请求,从而加快页面加载速度。
  2. 提高页面加载速度:在页面加载时,base64格式的图片可以直接从文件中读取,而不需要到服务器请求图片资源,从而可以减少页面加载时间。
  3. 更加安全:base64格式的图片能直接嵌入到HTML、CSS或JS文件中,不需要通过图片的URL来加载图片资源,从而可以更加保护图片资源的安全性。
  4. 适用于小图片:base64格式的图片适合处理小图片,因为base64编码可以将原始图片数据增加33%左右,如果图片太大,会增加文件大小和页面加载时间。

webpack处理图片资源(jpeg,jpg,png等)
如上图可以看到2.png只有9k,我们添加配置之后,应该会将其转换成base64.

webpack.config.js配置

// Node.js的核心模块,专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录,必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        // 用来匹配.less结尾的文件
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        // 用来匹配图片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

执行打包

npx webpack

效果如图:
webpack处理图片资源(jpeg,jpg,png等)
可以看到效果还是和上次没处理base64之前一样的

webpack处理图片资源(jpeg,jpg,png等)
这时可以看到dist目录下只有一张图片了,另一张被处理成了base64,以 data URI 形式内置到 js 中了
webpack处理图片资源(jpeg,jpg,png等)
再补充一点自动清空上次的打包资源
只需要在output配置对象下加上clean: true就行了,如下:文章来源地址https://www.toymoban.com/news/detail-476483.html

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },

到了这里,关于webpack处理图片资源(jpeg,jpg,png等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)

    一、浏览器网页展示图片方法 1.1、HTML img 标签 img 标签常用属性 序号 属性 描述 1 src 用于指定图片的 URL 或路径。 2 alt 用于当图片无法展示时显示的替代文本,seo优化时要注意添加这个属性。 3 width/height 用于指定图片展示的宽度和高度。如果只指定其中一个值,那么另一个

    2024年02月11日
    浏览(66)
  • [渲染层网络层错误] Failed to load local image resource /miniprogram/images/1.jpg无法加载本地图片资源

    最近开始学习编写小程序,跟着教程走到展示图片这一步发现这个错误。按照正常的编程思路和百度大法,大部分说是路径错误和图片不能带有中字。但是按照经验复制相对路径和绝对路径都不行,还是同样的错误。代码如下。 图片的路径绝对没问题,百度有的博客说用wx

    2024年02月11日
    浏览(51)
  • webpack无损压缩本地静态资源图片image-minimizer-webpack-plugin

    开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。 我们可以对图片进行压缩,减少图片体积。 一、image-minimizer-webpack-plugin介绍 Image-minimizer-webpack-plugin 是一个用于 优化和压缩图片 的 Webpack 插件。它使用多个优化器和压缩器来减小图片文件的大

    2024年02月09日
    浏览(86)
  • 【快速搞定Webpack5】处理样式资源(三)

    本次内容我们将学习使用 webpack 如何处理 css、less、sass、scss 等样式资源 webpack 本身是不能识别样式资源的,所以我们需要借助 loader 包来帮助 webpack 解析样式资源 我们找loader都应该去官方文档中查找对应的 loader ,然后学习使用。 官方文档找不到的话,可以从社区、 GitHub

    2024年02月22日
    浏览(44)
  • Vite静态资源处理——动态引入图片

    服务时引入一个静态资源会返回解析后的公共路径: 导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。 vite 生产构建后文件名会哈希,如图: import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,

    2024年02月10日
    浏览(43)
  • 【快速搞定Webpack5】处理字体图标资源(六)

    在实际开发中,几乎每个项目都需要用户 icon 图标以及部分项目会用到有特色的字体需求。 今天我们学习的内容就是如何在 webpack 中处理字体及 icon 图标的使用。 1、打开 阿里巴巴矢量图库 2、登录或注册账号 3、选择想要的图标添加到购物车,统一下载到本地 ● src/fonts/i

    2024年02月22日
    浏览(54)
  • webpack5基础--08_处理字体图标资源

    打开阿里巴巴矢量图标库 选择想要的图标添加到购物车,统一下载到本地 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体文件路径需要修改 src/main.js public/index.html type: \\\"asset/resource\\\" 和 type: \\\"asset\\\" 的区别: type: \\\"asset/resource\\\" 相当于 file-loader , 将

    2024年03月10日
    浏览(91)
  • Webpack5入门到原理5:处理样式资源

    我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用 官方文档找不到的话,可以从社区 Github 中搜索查询 Webpack 官

    2024年01月21日
    浏览(52)
  • Webpack5入门到原理11:处理 js 资源

    有人可能会问,js 资源 Webpack 不能已经处理了吗,为什么我们还要处理呢? 原因是 Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。 其次开发中,团队对代码格式是有严格要求的

    2024年01月20日
    浏览(61)
  • Webpack5入门到原理12:处理 Html 资源

    webpack.config.js 去掉引入的 js 文件,因为 HtmlWebpackPlugin 会自动引入 此时 dist 目录就会输出一个 index.html 文件

    2024年01月23日
    浏览(105)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包