webpack之处理图片和字体图标

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量384 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63685436/article/details/129339445
版权

处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

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

配置

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 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

修改输出资源的名称和路径

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/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处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

#2. 修改 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 修改 js 资源路径 -->
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

处理字体图标资源

1. 下载字体图标文件

  1. 打开阿里巴巴矢量图标库open in new window

  2. 选择想要的图标添加到购物车，统一下载到本地

2. 添加字体图标资源

  • src/fonts/iconfont.ttf

  • src/fonts/iconfont.woff

  • src/fonts/iconfont.woff2

  • src/css/iconfont.css

    • 注意字体文件路径需要修改

  • src/main.js

import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 使用字体图标 -->
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

3. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  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处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

type: "asset/resource"和type: "asset"的区别：

  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

赊汝
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack配置导致字体图标无法显示的解决方法
08-27
下面小编就为大家分享一篇webpack配置导致字体图标无法显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webpack基本配置（包含配置样式，处理图片和字体图标）
cc0429xy的博客
09-04 614
首先创建这几个文件，和文件夹。 初始化包 在根目录下：npm init -y 会生成package.json文件 这main.js是项目的js入口文件… 里面写：console.log('ok~~~');做测试用 在命令窗口中下载： webpack ./src/main.js -o ./dist/bundle.js cnpm i webpack-dev-server -D cnpm i webpack -D cnpm i webpack-cli -D cnpm i html-webpack-pl
webpack打包全过程以及遇到图片不显示问题解决方法
weixin_43878062的博客
04-05 4285
Webpack打包全过程以及遇到css,js,img问题解决方法 文章目录Webpack打包全过程以及遇到css,js,img问题解决方法前言一、Webpack1、运用场景2、安装配置二、案例演示1.引入库2.读入数据总结 前言 Webpack是前端构建工具 前端构建工具就是把开发环境代码转化称运行环境代码。开发环境的代码要通过混淆压缩后才能上线运行，这样代码占用内存较小， 一、Webpack 一般需要构建工具处理的几种情况 代码压缩 将js、css代码混淆压缩，代码体积更小，运行更快 编译语法 编
【webpack5】处理字体图标资源及其他资源
sylbiubiubiu的博客
08-31 174
webpack5处理字体图标资源
WebPack 图片处理
雨巷的博客
10-22 1083
WebPack 图片处理 前言：在网页开发的过程中，经常需要处理各类图标。以前我们会使用png/jpg图片，压缩完转base64或直接使用。但是这样会出现一个重要的问题，就是我们的图标是模糊的，放大一定系数之后，这种缺陷会越发的明显。有鉴于此，取而代之的是 iconFont 以及 SVG 等技术。本文会比较各类图片处理技术，各自的使用场合，并说明如何结合 Webpack 使用它们进行网页开发。 PNG / JPG 等像素图片格式 使用 webpack 将切完的 PNG/JPG 等像素图片压缩后（tin
Webpack项目中引入IconFont图标
pengjunlee的博客
08-27 3369
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。 IconFont官网：https://www.iconfont.cn/ 1、打开IconFont官网并登陆自己的账户。 2、挑选你喜欢的图标，添加入库。 3、进入购物车查看已挑选的图标，下载代码。 4、将下载后的图标代码解压，文件如下。 5、将解压文件复制到项目的 src/assets 目录下。...
在Webpack中用url-loader处理图片和字体
01-08
无论是图片还是字体库 只要是url地址 都无法处理 解决方法： 在项目根目录下输入cnpm i url-loader file-loader -D 安装url-loader和file-loader (url-loader内部依赖于file-loader) 然后在配置文件webpack.config....
webpack中使用iconfont字体图标的方法
08-27
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Webpack中用url-loader处理图片和字体的问题
10-15
主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
【webpack+elementui+vue file-loader字体图标变成小方框】
zayneer的博客
07-19 331
file-loader版本不对导致elementui打包后图标变成小方框
vue项目打包之后，element的图标显示小方框
张张张的博客
09-27 2505
这里这个limit 配置项会指定文件大小，小于limit的图片无法生成图片并以64格式引入，大于limit的图片将以url加载。
vue打包element图标变成方格
几何之星
03-02 916
问题 vue经过npm run build打包上线以后出现了element图标变成方格的问题。 解决 在build文件夹下面的webpack.base.conf.js文件中，原来的代码是 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath
2020-04-17
m0_47147387的博客
04-17 124
用webpack打包字体图标出现这种报错，先别慌，去打包后的html文件的控制台中看看在控制台中发现报错是cannot find module ‘./iconfont.svg?t=1587097590432’,去下载的图标资源里复制这个资源到要打包的文件夹中就行 ...
前端使用webpack打包有警告信息
weixin_44826970的博客
08-18 1664
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
webpack学习之webpack处理字体图标
qq_32021429的博客
11-16 280
webpack学习之webpack处理字体图标 在讲webpack处理字体图标之前先讲一下css文件的压缩 默认打包的css文件是不压缩的，即便是生产环境也只是压缩js和html 压缩css文件使用插件： optimize-css-assets-webpack-plugin 如果只是单独使用了这个插件，那么js反而又不压缩了，所以还需要用到压缩js的插件：terser-webpack-plugin // 安装之后再 webpack.config.js中引入 // 压缩css let OptimizeCs
webpack打包字体图标 报错 OTS parsing error: invalid version tag
y389278443z的博客
11-21 7635
浏览器中的错误为 实际显示效果为   这个时候，主要就是 style.css里面的路径的问题，开始查了下，网上都说要用相对的路径，于是就写从/src/static/.....    结果还是没变，还是报错，  看了一篇国外大神的问答 https://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loadi...
5. webpack处理不需要处理的资源(如字体图标)
草木红的博客
08-14 375
以打包字体图标为例 使用的loader：file-loader 图标库是阿里图标库下载的 下载file-loader (还需要安装html-webpack-plugin，css-loader, style-loader) npm i file-loader -D 创建入口文件(src/index.js)并引入图标库的入口文件 import './css/iconfont.css' 创建模板文件(src/index.html) <p class="iconfont icon-shan
webpack中如何使用iconfont字体图标
热门推荐
沉迷学习 日渐消瘦
12-09 2万+
入坑webpack，开始加载一些图片、js文件什么的都没有报错，今天正好下了iconfont字体，就出现了错误，所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的 同级目录：直接用文件名 上一级目录：../ 但是，我们是在webpac
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 1057
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
webpack处理字体图标
09-13
Webpack可以用来处理字体图标，你可以按照以下步骤进行配置： 1. 首先，确保你已经安装了`file-loader`或者`url-loader`这样的模块加载器。你可以通过运行以下命令安装： ``` npm install file-loader --save-dev...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值