浅析file-loader是什么及如何使用、file-loader与url-loader分别解决了什么问题以及其两者的联系与区别
一、file-loader 是什么
1、什么是 file-loader
简单来说,file-loader
就是在JS代码里 import/require
一个文件时,会将该文件生成到输出目录,并且在JS代码里返回该文件的地址。
2、如何使用
// 1、安装 file-loader
npm install file-loader --save-dev
// 2、配置 webapck
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
};
// 3、引入一个文件,可以是 import(或 require)
import logo from '../assets/image/logo.png';
console.log('logo的值: ', logo); // 打印一下看看 logo 是什么
PS:关于 file-loader
的 options
,这里就不多说了,见:https://webpack.js.org/loaders/file-loader/#options
简单三步就搞定了,然后执行 webpack
打包之后,dist
目录下会生成一个打包好的 bundle.js
,这个就不多说了。如果使用了 file-loader
, dist
目录这时候会生成我们用到的那个文件,在这里也就是 logo.png
。
默认情况下,生成到 dist
目录的文件不会是原文件名,而是:[原文件内容的 MD5 哈希值].[原文件扩展名]
。回到上文,console.log(logo)
会打印什么呢,我们执 bundle.js
看看:
node dist/bundle.js
// 输出结果是:
logo的值: dab1fd6b179f2dd87254d6e0f9f8efab.png
如上所说,会返回文件的地址
二、file-loader与url-loader的区别
url-loader和file-loader作用相似,不同之处在于处理不同大小图片时的方式:
1、file-loader在处理任何大小文件时,都会返回publicPath【指定资源的引用路径】;
这里返回的路径只是文件名,由hash值加上文件后缀。
可以通过下面的代码为css或js请求的资源【图片、字体等】指定请求位置。
const path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
publicPath:'dist/'
}
}
此时图片路径为:dist/f80262b63f8da8dc5d1e8c67f34dc56e.jpg
2、url-loader可以设置一个阈值,文件大于阈值时,与file-loader一样返回publicPath,小于阈值时,返回文件base64形式编码
3、url-loader和file-loader是什么关系呢?
简单地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。
4、url的工作情况分两种情况:
(1)文件大小小于limit参数,url-loader将会把文件转为DataURL;
(2)文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可
三、理解 file-loader 和 url-loader 解决的不同问题场景
如果我们希望在页面引入图片(包括 img 的 src 和 background 的 url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
相关文章
- 一个想要学习智能车的新手想知道如何开始搭?
- Unsupported major.minor version 52是什么造成的,如何解决?
- 6张图带你理解什么是 GitOps,它如何解决 Kubernetes 中的配置漂移问题?
- Allegro如何快速清除多余的规则设置操作指导
- C#【疑难杂症篇】VS“无法查找或打开PDB文件”是怎么回事?如何解决
- 【深解读】什么是数据科学?如何把数据变成产品?
- 【HTTP】IE的URL的最大长度限制和如何解决URL最大长度的限制
- Linux如何解决端口被占用的问题
- 如何解决快应用页面滑动卡顿问题
- 升级IDEA后Lombok不能用了,如何解决?
- WordPress网站文章ID不连续如何解决?
- SwiftUI 如何解决Generic parameter ‘SelectionValue‘ could not be inferred
- macOS SwiftUI 开发教程之 State如何解决默认选项为空的情况 (技巧含源码)
- 工作中如何不累,保持好心态;遇到问题,尽全力解决,不能解决也不能以死谢罪,饭还要吃,觉还是要睡
- TCP socket如何判断连接断开
- SQL Server 所依赖的磁盘已接近满,速度很慢该如何解决
- 什么是闭包,闭包造成的内存泄露如何解决
- 小程序报错saveimagetophotosalbum:fail invalid file type如何解决
- IO流:文件输入流、输出流,直接代码解析如何应用。
- 如何在tomcat启动的时候运行一个Java类
- 如何将vs的方案配置更改为Release;或分享给别人c语言编译的.exe文件怎么能直接运行;或提示“由于找不到MSVCP140D.dll无法继续执行代码”的解决方法
- 解决uniapp ios播放本地视频不显示controls的问题、uni-app video开始播放如何设置默认全屏
- 浅析qiankun主应用与微应用间如何通信解决微应用需要重复登录的问题
- 物联网如何阻止全球粮荒
- 【HMS Core】【SDK集成】如何解决集成华为分析SDK带来的隐私政策合规检测异常的问题
- [Oralce][InMemory]如何确定一个表已经被Populate 到In Memory 中?
- 项目的时间进度该如何估算?
- 如何解决机器学习中数据不平衡问题(转)
- html字体文件过大导致加载缓慢如何解决?
- CAD如何设置多个视口同步?CAD视口同步设置技巧
- archlinux的安装是如何从源码到二进制