在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 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
express框架下使用session的方法
Jul 31 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
pytorch 修改预训练model实例
2020/01/18 Python
python如何判断IP地址合法性
2020/04/05 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
教学评估实施方案
2014/03/16 职场文书
《故乡》教学反思
2014/04/10 职场文书
关于青春的演讲稿
2014/05/05 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
电子专业自荐信
2014/07/01 职场文书
化学教育专业求职信
2014/07/08 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
学校会议通知范文
2015/04/15 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
matlab xlabel位置的设置方式
2021/05/21 Python