webpack对icon-font和图片的处理

最新推荐文章于 2022-06-01 21:54:48 发布
原创 最新推荐文章于 2022-06-01 21:54:48 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Webpack中配置url-loader或file-loader来处理图片资源。通过实例演示了如何加载图片到项目中，并将其作为背景图片引入CSS。过程中解决了loader缺失导致的错误，并展示了正确的打包流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在module:的模块引用下的loaders里加上url模块

再初始化一下

成功后可以在package.json中看到安装的版本

之后我们在创建一个images测试下

mv 代表原文件 ../true2.jpg代表原路径,放在新路径的src/image下

可以看见Image文件中有了一个图片

有了这个图片;我们可以把它当背景在index.css中引用

执行webpack

再打包;报错了;

说明没有file-loader这个插件

再打包

发现dist文件下的css中的图片不再是64位

webpack4打包iconfont
YMX2020的博客
08-26 1002
webpack4打包iconfont 在日常开发中，项目中引入一些图标是十分常见的事情，那么遇到这样的图标，我们在打包项目的时候该如何配置webpack呢？ 首先我们需要一个loader file-loader 需要到iconfont矢量图标库下载相应的图标 如果还不知道怎么从阿里矢量图标库下载并且应用下载的图标，可以看我之前写过的一篇文章iconfont使用的三种方式 把下载好的矢量图标文件夹，放项目的font文件夹 在index.css文件中引入iconfont.css文件 /
webpack5-基础入门-03-修改打包资源路径 处理 图片 字体资源
weixin_40746230的博客
06-07 1388
修改打包资源路径 处理 图片 字体资源
webpack中使用iconfont字体图标的方法
01-19
入坑webpack，开始加载一些图片、js文件什么的都没有报错，今天正好下了iconfont字体，就出现了错误，所以这里分享一下怎么在webpack中使用iconfont。 1、修改css中字体文件路径 我把css和字体文件放在同级目录下 打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的 同级目录：直接用文件名 上一级目录：../ 但是，我们是在webpack环境下使用，所以要改成webpack引用规则，即改成下面图片所示 同级目录： ./ 上一级目录： ../ 2、配置如何加载woff等字体文件 大家都知道webpack要配置loader，
webpack中如何使用iconfont字体图标
热门推荐
沉迷学习 日渐消瘦
12-09 2万+
入坑webpack，开始加载一些图片、js文件什么的都没有报错，今天正好下了iconfont字体，就出现了错误，所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的 同级目录：直接用文件名 上一级目录：../ 但是，我们是在webpac
使用webpack打包字体图标
Heige博客
05-08 2428
使用webpack打包字体图标 1.首先需要安装url-loader bootstrap4.x之后，boostrap的css里删除了图标 分开了 我们在引入一个 下载：npm i bootstrap@4.1.3 -D 由于4.x版本icon文件分离出去所以还需要下载open-iconic： sudo cnpm i https://github.com/iconic/open-iconic.git ...
前端开源库-icon-font-loader
08-29
然后，在Webpack的配置文件（如webpack.config.js）中，需要引入并配置icon-font-loader，指定SVG源文件的路径和生成的CSS输出位置： ```javascript module.exports = { // ... module: { rules: [ { test: /\....
Webpack加载器：icon-font-loader 实现SVG转字体图标
3. icon-font-loader会在Webpack构建过程中拦截这些SVG文件，把它们转换成字体文件和相应的CSS样式。 4. 最终，构建产物中会包含生成的字体文件（如WOFF或TTF格式）以及用于引用这些图标的CSS文件。 5. 开发者可以像...
autofonticon-bocloudsp-webpack-plugin:Webpack插件可自动切换fonticon源
05-11
Webpack插件可自动切换fonticon源 介绍 将网址设置为您的ali字体图标网址（仅复制粘贴）。 在线版本将用于开发中。 文件将在构建时自动下载并设置。 安装 $ npm install autofonticon - bocloudsp - webpack - ...
fontmin-webpack：将图标字体缩小为仅使用的字形
02-05
fontmin-webpack 将图标字体最小化为所使用的字体。 # for webpack 5 npm install --save-dev fontmin-webpack # for webpack 4 npm install --save-dev fontmin-webpack@^2.0.1 # for webpack <=3 npm install...
VScode中vue3项目中使用icon-font中的svg图标
最新发布
07-29
我们正在处理一个关于在VSCode的Vue3项目中使用icon-font SVG图标的问题。根据用户提供的引用内容，他们展示了一个SvgIcon组件的实现，该组件用于在Vue项目中显示SVG图标。但是用户的实际需求是在VSCode中使用icon-...
使用webpack打包的单页面项目如何设置favicon.icon文件
赵天铭的博客
06-28 7977
上一篇文章：如何给网站设置favicon.ico图标，介绍了favicon.ico是什么，怎么配置，有哪几种方式。 但发现webpack打包的单页面项目却与普通项目不同，所以这篇文章介绍一下使用webpack打包的单页面项目如何设置favicon.icon文件 第一种方式：放在根目录的实现 首先，将favicon放在项目的根目录下 然后： 1、找到build下的webpack.dev.conf.j...
webpack成长指北第9章---webpack如何对icon字体进行打包
博哥的二进制世界
07-20 521
webpack成长指北第9章---webpack如何对icon字体进行打包前言下载icon图标项目目录项目代码 前言 在项目中，我们有时候会引入icon字体来实现一些图标的展示，但是之前文章有说过，webpack只识别js文件，那么如何对eot,ttf,svg,woff,woff2等类型的icon字体文件进行打包呢？ 下载icon图标 我们可以先去阿里巴巴矢量图标库中下载所需要的icon图标 下载完成后获得这些文件 项目目录 项目代码 index.html <!DOCTYPE html&g
Webpack5相关知识点（一）- 基础（3）- 处理图片资源、修改输出文件目录、自动删除上次打包内容、处理字体图标资源、处理其他资源
JHY97的博客
06-01 664
Webpack5相关知识点（一）- 基础（3）- 处理图片资源、修改输出文件目录、自动删除上次打包内容、处理字体图标资源、处理其他资源
webpack处理iconfont字体文件打包
weixin_45966674的博客
01-27 1975
首先你要先会用iconfont 如果还不会建议观看我的文章 iconfont创建前端图标库 先在我们的文件夹里建一个项目 npm init 根据提示操作 就会生成一个package.json 我们现在项目终端把该引入的东西引入了 npm install webpack webpack-cli --save-dev npm install html-webpack-plugin --save npm install webpack-dev-server --save npm install css
Webpack5随笔
imber___zsk的博客
11-03 169
webpack5 asset module type 资源模块类型 可以代替file-loader 、url-loader webpack常用的loader less-loader css-loader style-loader postcss-loader file-loader 可打包iconfont url-loader 可转base64 常用plugin clean-webpack-plugin 删除文件夹 html-webpack-plugin 生产html文件 copy-webpack-plug
webpack 加载 iconfont字体图标
yaoyyl的博客
05-31 8373
1. 使用之前要安装url-loader、file-loader 2. 修改webpack的配置文件的loaders配置 3. 修改css引用路径（注意要把引号去掉，路径前加上.）
Webpack项目中引入IconFont图标
pengjunlee的博客
08-27 3449
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。 IconFont官网：https://www.iconfont.cn/ 1、打开IconFont官网并登陆自己的账户。 2、挑选你喜欢的图标，添加入库。 3、进入购物车查看已挑选的图标，下载代码。 4、将下载后的图标代码解压，文件如下。 5、将解压文件复制到项目的 src/assets 目录下。...
react + webpack使用阿里iconfont，解决：图标显示小方块
LiuChengYu520的博客
11-01 3064
问题 使用 create-react-app 脚手架创建的项目，在使用iconfont时，一直不成功，效果显示为小方块 前置 为了解决组件间样式的污染，使用CSS Modules，附上阮大神教程， CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件 问题排查 打开浏览器调试 发现： .iconfont{ font-famil...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周家大小姐.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值