webpack里的loader是什么，干嘛的，webpack和loader是什么关系?
1.首先，webpack干嘛的？看图：
webpack就是打包的，就不啰嗦啦
2.那loader是什么玩意儿？在webpack的世界里，干了点什么？
先看看官网的解释，【https://www.webpackjs.com/concepts/#loader】
官网说了：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
瞅见那句我加粗标红的话了木有，接下来，我翻译一下我的理解嗷：
1.webpack需要loader预处理，因为它只认识Js。
2.所以loader就是个搞预处理工作的，它的职业是人类世界的翻译官。
好了，然后咱给loader起个昵称吧，就叫它小loader吧！
???
你们可能想问，这个昵称简便到哪里了吗？
理直气壮地告诉你，没有！哈哈哈哈哈，但是它更像个人了，就像隔壁的小张小王小李一样。
· 小loader作为翻译官，它的工作就是把不同类型的资源（所有不是js的），翻译给webpack这个大文盲；
· 因为webpack的母语是js(只认识js)，如果没有小loader帮它，webpack就无法顺利开展它的本职工作（打包）；
· 而小loader作为翻译官，它的手里有很多字典，比如ts-loader，url-loader，vue-loader，file-loader等，真是个文化人啊！
· 当小loader遇到不同国家（类型）的文件的时候，就需要拿出不同的字典（即安装不同的loader，webpack不自带loader,需要npm安装），这也就是所谓的预处理的含义。
so，啰里啰嗦，就是这个意思，给它们拟人之后，我这个看了很多遍解释，还是不能说清楚的小脑袋瓜再也不会忘了——小loader是个搞预处理的翻译官。
具体配置就不说了，我是来记录含义的！
webpack里的loader是什么，干嘛的，webpack和loader是什么关系?相关推荐
- webpack里的module选项配置
webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{loaders:[],noParse: [ path.join( ...
- 单步调试理解webpack里通过require加载nodejs原生模块实现原理
在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...
- Webpack实战（五）：轻松读懂Webpack如何分离样式文件
在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...
- webpack打包压缩混淆_前端打包利器：webpack工具
一.什么是WebPack,为什么要使用它? 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端 ...
- webpack如何将css文件分离的,详解webpack分离css单独打包
这篇文章只写了如何把css打包成一个css文件,没有讲解如何打包成多个css文件,经简友提点,这里添加上了 打包成多个css文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, css, ...
- 如何通过网络将文件传输到嵌入式设备_嵌入式系统 Boot Loader技术内幕,带你完全了解Boot Loader...
一个嵌入式 Linux 系统从软件的角度看通常可以分为四个层次:1. 引导加载程序.包括固化在固件(firmware)中的 boot 代码(可选),和 Boot Loader 两大部分.2. Linu ...
- webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存 前言 你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
- SAP Spartacus cxOutlet里的元数据存储，outlet名称和待渲染Component的映射关系
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
- 前端打包利器webpack里utils.cssLoaders的工作原理调试
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
最新文章
- 【深度学习】利用神网框架分割病理切片中的癌组织（胃）
- 梯度下降 gradient descent
- Servlet和JSP规范及版本对应关系
- Git复习（十二）之命令专场
- k8s灰度更新_k8s slb如何实现灰度发布-问答-阿里云开发者社区-阿里云
- 《软件需求规格说明书》 ---学士之路
- OpenPCDet：点云3D目标检测开源库
- 第四次作业——测试作业
- 190117每日一句
- INSTALL_FAILED_UID_CHANGED解决办法
- 计算机编程语言分类与区别
- 计算机网络中的分组交换是什么,什么是分组交换
- thinkphp6自定义日志驱动,增加显示全部请求信息
- 特殊句型之反义疑问句
- 最强蜗牛服务器维护要多久,最强蜗牛转服需要什么条件
- vue form表单验证清除
- getInputStream/getReader() has already been called for this request
- 阿里云国际版核心渠道商
- 融金所孙明达：“科技+政策”双轮驱动普惠金融
- 全球规模最大天文馆上海天文馆18日正式开馆，这里让你先睹为快！