Webpack5 处理图片资源

文章目录

  • 处理图片资源
    • [1. 配置](#1. 配置)
    • [2. 添加图片资源](#2. 添加图片资源)
    • [3. 使用图片资源](#3. 使用图片资源)
    • [4. 运行指令](#4. 运行指令)
    • [5. 输出资源情况](#5. 输出资源情况)
    • [6. 对图片资源进行优化](#6. 对图片资源进行优化)
    • 7.使用data-uri的优点和缺点

处理图片资源

过去在 Webpack4 时,我们处理图片资源通过 file-loaderurl-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源

1. 配置

js{29-32} 复制代码
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
   	  ...,
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 添加图片资源

  • src/images/1.jpeg
  • src/images/2.png
  • src/images/3.gif

3. 使用图片资源

  • src/less/index.less
css 复制代码
.box2 {
  width: 100px;
  height: 100px;
  background-image: url("../images/1.jpeg");
  background-size: cover;
}
  • src/sass/index.sass
css 复制代码
.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover
  • src/styl/index.styl
css 复制代码
.box5
  width 100px
  height 100px
  background-image url("../images/3.gif")
  background-size cover

4. 运行指令

:no-line-numbers 复制代码
npx webpack

打开 index.html 页面查看效果

5. 输出资源情况

此时如果查看 dist 目录的话,会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

  • 为什么样式资源没有呢?

因为经过 style-loader 的处理,样式资源打包到 main.js 里面去了,所以没有额外输出出来

6. 对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式(Base64 格式)

js{32-36} 复制代码
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
      ...,
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

7.使用data-uri的优点和缺点

优点:1.减少http请求数量,有时候图片的体积太小,占用一个HTTP会话不是很值得。

2.当http访问外部资源很麻烦或受限时,使用datauri可以解决这个问题

缺点:1.体积变得更大,Base64编码的数据体积通常是原数据的体积4/3,也就是datauri形式的图片会比二进制格式的图片体积大1/3。

2.datauri形式的图片不会被浏览器缓存

3.增加了 CSS 文件的尺寸,增加打包时间

4.IE678兼容性较差

5.移动端不宜使用 Data URI 技术(解码耗 CPU)

相关推荐
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟9 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor10 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter11 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝12 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽13 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥14 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
呆呆的心17 分钟前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了18 分钟前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div19 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试