在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 相关文章推荐
jsPDF导出pdf示例
May 02 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
javascript表格的渲染组件
Jul 03 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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 安全过滤函数代码
2011/05/07 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python实现常见的回文字符串算法
2018/11/14 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python文件路径名的操作方法
2019/10/30 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python pip配置国内源的方法
2020/02/14 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
个人生活学习自我评价范文
2013/11/26 职场文书
四年级下册教学反思
2014/02/01 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
仓管员岗位职责
2015/02/03 职场文书
土建施工员岗位职责
2015/04/11 职场文书
春节慰问简报
2015/07/21 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python