在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 !!的作用
Dec 04 Javascript
javascript制作2048游戏
Mar 30 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JS敏感词过滤代码
Dec 23 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue实现微信分享功能
Nov 28 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
js 控制页面跳转的5种方法
2013/09/09 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
自我鉴定模板
2013/10/29 职场文书
大学生村官承诺书
2014/03/28 职场文书
二年级学生评语大全
2014/04/23 职场文书
初中班级口号
2014/06/09 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
中学生思想品德评语
2014/12/31 职场文书
维稳承诺书
2015/01/20 职场文书
团员自我评价范文
2015/03/10 职场文书
交通事故起诉书
2015/05/19 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python