在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读取cookie函数代码
Oct 16 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
Vue登录主页动态背景短视频制作
Sep 21 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判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
vue 组件简介
2020/07/31 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python中的默认参数实例分析
2018/01/29 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
物业保安辞职信
2015/05/12 职场文书
埃及王子观后感
2015/06/16 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS