在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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
动态表格Table类的实现
Aug 26 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
初步理解Python进程的信号通讯
2015/04/09 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python学习必备知识汇总
2017/09/08 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
银行实习生的自我评价
2013/12/09 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
敬老模范事迹
2014/05/21 职场文书
个人党性分析材料
2014/12/19 职场文书
电力工程合作意向书
2015/05/11 职场文书
机械生产实习心得体会
2016/01/22 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers