【Webpack】处理图片资源

处理图片资源

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

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

1. 配置

复制代码
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",
};

2. 添加图片资源

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

3. 使用图片资源

  • src/less/index.less

    .box2 {
    width: 100px;
    height: 100px;
    background-image: url("../images/1.jpeg");
    background-size: cover;
    }

  • src/sass/index.sass

    .box3
    width: 100px
    height: 100px
    background-image: url("../images/2.png")
    background-size: cover

  • src/styl/index.styl

    .box5
    width 100px
    height 100px
    background-image url("../images/3.gif")
    background-size cover

4. 运行指令

复制代码
npx webpack

打开 index.html 页面查看效果

5. 输出资源情况

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

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

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

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

6. 对图片资源进行优化

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

复制代码
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",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};
  • 优点:减少请求数量(base64编码对应的图片会直接在页面生成,而不是进行请求后响应得到)
  • 缺点:体积变得更大

此时输出的图片文件就只有两张,有一张图片以 data URI 形式内置到 js 中了 (注意:需要将上次打包生成的文件清空,再重新打包才有效果)

相关推荐
G等你下课26 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在26 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵29 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius29 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91032 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala34 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy34 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101037 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日38 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子39 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试