webpack5打包之 图片、字体、icon
目录
- 1:webpack5打包之 图片
- 01:webpack5打包之 图片转化base64等
- webpack.config.js
- main.css
- 图片目录
- npm run build 打包后的效果
- 02:webpack5打包之 图片压缩等
- package.json
- webpack.config.js
- main.css
- npm run build效果
- 2:webpack5打包之 字体
- webpack.config.js
- 目录
- css / main.css
- npm run build效果
- 3:webpack5打包之 icon
1:webpack5打包之 图片
01:webpack5打包之 图片转化base64等
webpack.config.js
// loader相关配置module: {rules: [{test: /\.(png|jpg|svg|gif|webp|JPG|jpe)$/, type: 'asset',parser: {dataUrlCondition: {maxSize: 20 * 1024 // 把小于 20kb 的文件转成 Base64 的格式}}, generator: {// [ext]前面自带"."filename: 'assets/[hash:8].[name][ext]',},},]},
main.css
body {/* background: yellow; *//* 29kb 效果 background: url(images/dog1-afa6a.min.webp); */background: url("../assets/dog.webp");/* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 *//* background: url("../assets/hlw.webp") *//* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */
}
图片目录
npm run build 打包后的效果
- base64 （ 小于 20kb的图片）
- 大于20kb的图片
02:webpack5打包之 图片压缩等
package.json
"devDependencies": {"image-webpack-loader": "^8.1.0",},
webpack.config.js
// loader相关配置module: {rules: [{test: /\.(png|jpg|svg|gif|webp|JPG|jpe)$/,type: 'asset/resource',parser: {dataUrlCondition: {maxSize: 20 * 1024 // 把小于 20kb 的文件转成 Base64 的格式}},generator: {// [ext]前面自带"."filename: 'assets/[hash:8].[name][ext]',},use: [// 使用 image-webpack-loader 对图片进行压缩{loader: "image-webpack-loader",options: {mozjpeg: {progressive: true,quality: 65},optipng: {enabled: false},pngquant: {quality: '65-90',speed: 4},gifsicle: {interlaced: false},// 不起效果???webp: {quality: 75}}},]},]},
main.css
body {/* background: yellow; *//* 29kb 效果 background: url(images/dog1-afa6a.min.webp); *//* background: url("@/assets/dog.webp"); *//* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 *//* background: url("../assets/hlw.webp") *//* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */background: url("../assets/11.jpg")
}
npm run build效果
dist / index.html 效果
打包前
打包后
2:webpack5打包之 字体
webpack.config.js
// loader相关配置module: {rules: [// 添加字体文件的处理规则{test: /.ttf|eot|woff2?$/i,type: 'asset/resource',generator: {filename: 'font/[name].[hash:6][ext]'}},]},
目录
css / main.css
@font-face {font-family: "PingFang";src: url("../fonts/PingFang\ Bold.ttf");
}
body {/* background: yellow; *//* 29kb 效果 background: url(images/dog1-afa6a.min.webp); *//* background: url("@/assets/dog.webp"); *//* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 *//* background: url("../assets/hlw.webp") *//* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */background: url("../assets/11.jpg");font-family: 'PingFang';}
npm run build效果
3:webpack5打包之 icon
webpack5打包之 图片、字体、icon相关推荐
- Vue之webpack打包CSS图片字体
初始化: npm init -y 安装webpack npm install webpack webpack-cli --save-dev 安装vue npm i --save-dev vue vue ...
- webpack5打包图片并放到指定文件夹下
webpack5打包图片并放到指定文件夹下 module: {rules: [{test: /\.(jpg|png|gif)$/,type: 'asset/resource',generator: { ...
- webpack5打包图片报错——Module parse failed: Octal literal in strict mode 图片不能正常显示
Octal literal in strict mode 一.webpack打包图片 二.报错 三.解决 四.img标签中的图片打包后不能正常显示 五.总结 六.追加 一.webpack打包图片 we ...
- html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示 本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...
- 富文本编辑器、日期选择器、软件天堂、防止XSS攻击、字体icon、转pdf
[超好用的日期选择器] Layui:http://www.layui.com/laydate/ 备注:日期选择器,用过很多很多,自己也写过一些:相信这个简单而又不简单的选择器,能够给你多些美好的时光 ...
- unity 字体width_unity制作图片字体
有时候美术会给出一系列的艺术字,例如数字0,1,2,3,4,5,6,7,8,9,这些字以图片的形式给开发人员,这时候图片的用法怎么用呢? 第一种想到的方法是把图片按字命名,然后以字为key存成字典,获 ...
- Unity自定义美术字体(图片字体fontsettings)
目录 本文内容 效果 工具代码 制作美术字体 1 资源 1.1 资源方式 1.2 资源命名 1.3 资源命名配置 2 打包字体 2.1 创建字体 2.2 更新字体 3 字体使用 本文内容 开发过程有个 ...
- 解决webpack打包bootstrap报字体不能解析问题
解决webpack打包bootstrap报字体不能解析问题 参考文章: (1)解决webpack打包bootstrap报字体不能解析问题 (2)https://www.cnblogs.com/zero ...
- vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题 使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
最新文章
- Jmeter性能测试 入门
- Web应用配置虚拟主机(www.baidu.com)
- OPPO Find X3通过网站推广正式官宣，打破常规探索高端旗舰新突破！
- ROC曲线是通过样本点分类概率画出的 例如某一个sample预测为1概率为0.6 预测为0概率0.4这样画出来，此外如果曲线不是特别平滑的话,那么很可能存在过拟合的情况...
- mysql 避免使用NULL字段
- [CommunityServer]看RBAC的一方景象
- OpenGL Volume Texture体积纹理的实例
- 1. 两数之和（Java）
- 如何搜索视频和字幕？
- MySQL之my.cnf配置文件
- nomasp 博客导读：Lisp/Emacs、Algorithm、Android
- matlab 稳定系统,MATLAB分析在系统稳定性的应用
- 整理了一系列的JavaScript树操作方法，不用再一遍又一遍的百度了
- linux赋予普通用户root,Linux --赋予普通用户root 权限
- linux 正点原子ov5640_【正点原子FPGA连载】第二十四章OV5640摄像头HDMI显示-摘自【正点原子】领航者 ZYNQ 之嵌入式开发指南 (amobbs.com 阿莫电子论坛)...
- 问题解决no matches found: nvidia-*
- Ubuntu22下OpenCV4.6.0+contrib模块编译安装
- Android使用图片资源
- 云创大数据云存储专利荣获“江苏专利奖优秀奖”
- 二、Matlab图像的读取和存储