在Webpack中用url-loader处理图片和字体的问题


Posted in Javascript onApril 28, 2020

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

一、处理图片文件

默认webpack无法处理css文件中的url地址 在打包时会报错
无论是图片还是字体库 只要是url地址 都无法处理

在Webpack中用url-loader处理图片和字体的问题

解决方法:

在项目根目录下输入cnpm i url-loader file-loader -D
安装url-loader和file-loader
(url-loader内部依赖于file-loader)

然后在配置文件webpack.config.js中进行配置loader

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
 entry:path.join(__dirname,"./src/main.js"),
 output:{
 path:path.join(__dirname,"./dist"),
 filename:"bundle.js"
 },
 // 所有webpack插件的配置节点
 plugins:[
 new htmlWebpackPlugin({
  template:path.join(__dirname,"./src/index.html"),
  filename:"index.html"
 })
 ],
 // 配置第三方loader模块
 module:{
 rules:[
  // 第三方模块的匹配规则
  {test:/\.css$/,use:["style-loader","css-loader"]}, // 处理css文件的loader
  {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"} // 处理图片url的loader
 ]
 }
}

使用url-loader打包之后 在页面中 默认会将路径以base64编码 减少图片的二次请求

关闭默认的以base64编码:

进行配置:
给url-loader传参 格式和网页url地址传参完全一致 在url-loader后面加问号传递参数即可
属性名:limit
设定一个大小范围 当图片大于或等于给定的limit值(单位byte) 则不将url转换为base64格式 反之进行转换
格式:{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=图片大小"}

如何查看图片大小:

右击图片 - 属性

在Webpack中用url-loader处理图片和字体的问题

:若图片长度大于三位 每三位要以逗号进行分隔
496886要写成496,886
例:{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886"}

若不进行base64的转换

图片的名称会默认变成一串Hash字符串 以防止图片重名

可通过配置 不使用默认的改名为Hash字符串:
在url-loader后面加上name=[name].[ext]即可
[name]意为:之前是什么名称 打包之后也叫什么名称
[ext]意为:之前是什么后缀名 打包之后也叫什么后缀名

例:{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[name].[ext]"}

否则 由于打包后的url引用的直接是文件名.后缀名的格式 若有重名的图片 即使不在同一个文件夹下
也会出现引入的图片重复

为避免此问题 需要将名称改为不重复的

既要不改文件名 又要避免图片重复问题
可配置为:{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"}
name=[hash:8]-[name].[ext]的意思是:在图片前面带上32位hash值的前8位 中间用短横杠进行连接 具体的hash值长度可根据需要设置 但不能超过32 因为hash值最大只有32位

二、处理字体文件

在main.js里引入字体文件:

若通过路径的形式引入node_modules中相关的文件 可省略node_modules
若不写node_modules 默认会从node_modules里查找

例:
bootstrap.css文件在node_modules/bootstrap/dist/css下
但在引入的时候 可以这么写:

import "bootstrap/dist/css/bootstrap.css"

然后 同样 在webpack.config.js中进行配置即可:
字体文件也是使用url-loader进行处理

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
 entry:path.join(__dirname,"./src/main.js"),
 output:{
 path:path.join(__dirname,"./dist"),
 filename:"bundle.js"
 },
 // 所有webpack插件的配置节点
 plugins:[
 new htmlWebpackPlugin({
  template:path.join(__dirname,"./src/index.html"),
  filename:"index.html"
 })
 ],
 // 配置第三方loader模块
 module:{
 rules:[
  // 第三方模块的匹配规则
  {test:/\.css$/,use:["style-loader","css-loader"]},
  {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"},
  {test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"} // 处理字体文件的loader
 ]
 }
}

到此这篇关于在Webpack中用url-loader处理图片和字体的文章就介绍到这了,更多相关在Webpack中用url-loader处理图片和字体内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
模拟select的代码
Oct 19 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
react PropTypes校验传递的值操作示例
Apr 28 #Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 #Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
You might like
php常用hash加密函数
2014/11/22 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
js select option对象小结
2013/12/20 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
python中as用法实例分析
2015/04/30 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Django数据统计功能count()的使用
2020/11/30 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
大学生社会实践评语
2014/04/25 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
商务信函英语问候语
2015/11/10 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js