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是个搞预处理的翻译官。

具体配置就不说了，我是来记录含义的！