深入了解 Loader
相关的 Loader,因为像 .png
这样的文件不是一个 JavaScript 模块,你需要配置 webpack 使用 file-loader 或者 url-loader 去合理地处理它们。通过 Vue CLI 创建的项目已经把这些预配置好了。
为什么要使用 Loader,转换资源 URL 的好处是:
file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的 URL。
url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求数。如果文件大于该阈值,会自动的交给 file-loader 处理。
如何转换,先了解一下 file-loader 使用和处理:
module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif)$/i,loader: 'file-loader',options: {outputPath: 'images', // 打包后文件放到images文件夹里面},},],},
};
const src = require('./file.png');
// 或者 import src from './file.png';
// 不能直接使用本地图片 const src = './file.png'
// 但是可以使用线上图片 const src = 'https://juejin.cn/file.png'
const img = new Image();
img.src = src;
document.body.appendChild(img);
打包结果:
const src = "images/dbe16934d9c9d889ffe7406967a3b090.png"
const img = new Image();
img.src = src;
document.body.appendChild(img);
通常我们打包代码会生成在 dist 目录,里面的文件也都是静态资源,部署的时候也是以 dist 为准作为根目录运行。而开发的时候我们写的本地路径都是相对于当前文件夹写的,所以如果直接写死的话一打包就会报错提示无法找到路径下面的文件,因此我们需要通过 file-loader 进行处理为正确的路径。
注意:在这里提一下 url-loader 和 file-loader 的区别,url-loader 是把一个相对较小的图片转换为 base64 地址 ,而那些相对较大的图片会继续使用 file-loader 处理为正确路径。
const src = "data:image/jpeg;base64,/9j/4AAQS……"
const img = new Image();
img.src = src;
document.body.appendChild(img);
通常为了性能优化(图片转换成base64格式的优缺点 [1]),我们会添加 url-loader 处理。思考一下 file-loader 和 url-loader 可以分开使用吗?答案是可以的,但是通常是配合使用的,不建议把所有的图片都转换为 base64 ,有时候不仅没有达到优化目的,反而造成包体积变大了。
References
[1]
图片转换成base64格式的优缺点 : https://zhuanlan.zhihu.com/p/77028309
深入了解 Loader相关推荐
- Android笔记(adb命令--reboot loader)
Android 的机器通过adb进入升级模式的方法 # adb shell # reboot loader 通过上面两个命令就进入升级模式了,通过工具升级就好了 为什么会写这简单的一篇呢?因为今天干了 ...
- 【cocos2d-js官方文档】九、cc.loader
概述 原来的cc.Loader被改造为一个单例cc.loader,采用了插件机制设计,让loader做更纯粹的事. 各种资源类型的loader可以在外部注册进来,而不是直接将所有的代码杂揉在cc.Lo ...
- Loader 入门【Webpack Book 翻译】
原文链接:https://survivejs.com/webpack... 翻译计划:https://segmentfault.com/a/11... 附言:因为发现书中一些内容单独放出来会比较尴尬, ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务 一.区别 前面两节我们有提到Loader与Plugin对应的概念,先 ...
- [转] React Hot Loader 3 beta 升级指南
前言 在用 react-hot-loader v1.3 的时候有些深层组件不会很完美的热更新(可能是我使用有问题).然后在 react-hot-loader 首页中看到 React Hot Loade ...
- webpack + loader 使用笔记
先睹为快 demo 地址点 这里 1. 准备一个 webpack_demo 创建 src 和 dist 文件夹 在 src 目录下创建 js 文件夹 在 js 文件夹下创建 module-1.js,m ...
- Oracle SQL Loader的详细语法
Oracle SQL Loader的详细语法 SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据 仓库选择使用的 ...
- linux oracle path恢复,Linux 环境下Oracle安装与调试(七)之SQL Loader,备份和恢复
1.SQL Loader sql loader其实就是 把数据文件的数据插入到oracle数据表中. sql*loader 使用格式如下: sqlldr userid control data 也就是 ...
- 基于px2rpx-loader,探讨一下loader的封装思想
本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想. 1.前言 最近在了解mpvue框架的时候,对于其能够实现一套代码兼容web和微信小程序(以下简称小程序)的 ...
最新文章
- QGIS打印布局cheatsheet
- 智课雅思词汇---五、优词词根字典
- 数据库中死锁那些事儿
- JVM 史上最最最完整知识总结!
- 自制 .NET Core 路由调试中间件
- 启动tomcat时 一闪而过解决方法
- 关于表空间、Schema和用户
- 在Linux上安装MySql
- swing JTable学习(七)—TableModelListener
- python中的threading_python中threading的用法
- java php 采集数据,php和java进行交互数据
- 手机自动签到简易应用
- 计算机技术在多晶体衍射中的应用,材料研究分析方法(研究生)-XRD2.ppt
- C# | 批量将CAD图幅网格外扩生成新图框(附源代码下载)
- 【Java】用类描述计算机中CPU的速度和硬盘的容量,要求Java应用程序由4个类,名字分别是PC、CPU、HardDisk、和Test,其中Test是主类。
- 矩阵迹(trace)与行列式(determinate)的一些性质
- RGB HSV CMYK LAB颜色空间
- 【播放器】播放器对比
- Python中in和has_key的性能比较
- OCR表格识别—(一)
热门文章
- 求求你给你的微信头像戴个圣诞帽吧!
- C++20 即将于年底发布,C++ 23 提上日程!
- 蚂蚁金服推出分布式的图神经知识表示框架,性能和可扩展性俱佳
- 关于自然语言处理,数据科学家需要了解的 7 项技术
- 数据分析师 vs 算法工程师,Python 出身的程序员如何抉择?
- Go语言潜力有目共睹,但它的Goroutine机制底层原理你了解吗?
- @开发者 想成为行业应用开发的实力派吗?TA 或者能帮到你
- 2020 年,哪些行业将会遭到 5G 洗礼?
- “留给美团的机会不多了!” | 畅言
- 这才是 Python 的 “72 变”玩法!