Webpack5入门到原理6:处理图片资源

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

处理图片资源

过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-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",
};
  • 优点:减少请求数量
  • 缺点:体积变得更大

此时输出的图片文件就只有两张,有一张图片以 data URI 形式内置到 js 中了

(注意:需要将上次打包生成的文件清空,再重新打包才有效果)文章来源地址https://www.toymoban.com/news/detail-807495.html

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

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

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

相关文章

  • Webpack5入门到原理12:处理 Html 资源

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

    2024年01月23日
    浏览(105)
  • webpack处理图片资源(jpeg,jpg,png等)

    在webpack5以前,我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能 内置 到 Webpack 里了,我们只需要简单配置即可处理图片资源 webpack.config.js配置 完整代码如下: 添加图片资源 使用图片资源 执行打包命令 npx webpack 效果如下: 可以看到背

    2024年02月08日
    浏览(98)
  • 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日
    浏览(44)
  • 【快速搞定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入门到原理

    尚硅谷Webpack5新版视频教程 B站直达:https://www.bilibili.com/video/BV14T4y1z7sw 百度网盘:https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码:yyds 阿里云盘:https://www.aliyundrive.com/s/UMkmCzdWsGh(教程配套资料请从百度网盘下载) 围观尚硅谷前端课程:http://www.atguigu.com/web 更多尚硅谷视频教程

    2024年02月09日
    浏览(51)
  • Webpack5入门到原理18:Plugin 原理

    通过插件我们可以扩展 webpack,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系

    2024年01月22日
    浏览(46)
  • Webpack5入门到原理17:Loader 原理

    帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 分类 pre: 前置 loader normal: 普通 loader inline: 内联 loader post: 后置 loader 执行顺序 4 类 loader 的执行优级为:pre normal inline post 。 相同优先级的 loader 执行顺序为:从右到左,从下到上。 例如: 使用 loader 的方式 配

    2024年01月22日
    浏览(64)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包