在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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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图片添加文字水印实现代码
2016/03/15 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
node.js中的fs.read方法使用说明
2014/12/17 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python生成密码库功能示例
2017/05/23 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
酒店端午节促销方案
2014/02/18 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
个人年度总结报告
2015/03/09 职场文书
飞屋环游记观后感
2015/06/08 职场文书
婚宴领导致辞
2015/07/28 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers