在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 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
DOM 高级编程
May 06 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php跨站攻击实例分析
2014/10/28 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
js实现碰撞检测
2021/01/29 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
详解Python with/as使用说明
2018/12/13 Python
python实现电子产品商店
2019/02/26 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
怎样创建、运行java程序
2014/08/01 面试题
自荐信格式范文
2013/10/07 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
西柏坡观后感
2015/06/08 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书