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)

相关推荐
brzhang10 分钟前
我用 Flutter 做了个小游戏,结果发现这玩意有点意思
前端·后端·架构
用户63879947730513 分钟前
我把我的 monorepo 迁移到 Bun,这是我的真实反馈
javascript·架构
用户579738839731513 分钟前
JavaScript(Node.JS) 使自定义类可以通过下标访问内部可迭代值
javascript
brzhang15 分钟前
用 Vue 写原生 iOS/Android 应用,我发现这个库比 uni 要轻量且靠谱些
前端·后端·架构
代码小学僧19 分钟前
前端技巧:检测到省略号文本自动显示 Tooltip
前端
JarvanMo24 分钟前
🛑 停止重写样板代码。开始使用 Kotlin 委托吧!
前端
细节控菜鸡29 分钟前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js
博客zhu虎康35 分钟前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui
长明37 分钟前
Electron 的西天取经
vue.js·electron
Mintopia38 分钟前
🧠 Next.js 文件上传(头像 / 图片)终极指南
前端·后端·全栈