前言

张无忌学会了九阳神功之后，再去模仿别人武功就轻而易举。我们在掌握一门技术的时候也应如此，重视原理，当你熟悉原理之后，再去拓展其他便会轻松很多。很多人觉得一项东西很枯燥，要么是他真的枯燥，要么是你不了解其他原理，很多东西碎片化的散落在大脑里的各个地方，你想去拓展却不知如何下手，你便会产生抵触情绪。所以你愿意去掌握一项东西的时候，一定要从原理开始，从能听得懂的白话开始。

loader的原理

还是那句话，不要面向面试去学习，不要为了八股文而八股文，作为面试官常常会问的webpack的核心loader，想必各位都熟悉，比如说来说一说loader的执行顺序，loader与plugin的区别，你有没有手写过loader等等，这些无非是考察你是否真的去了解过loader的原理。 我在编排文章之前，会先看一下其他作者写的相关的文章，我一定是要用最清晰的思路、最简洁的代码让你能尽量理解，对于初学者而言肯定是讨厌长篇大论，为什么很多人喜欢刷短视频，因为兴趣停留时间不会太长。 先看下官方文档：

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

好从这句话你能获取什么信息，webpack只能理解JS或者JSON文件，其他资源类型也可以打包，但是不支持，如果想支持的话，你需要借助webpack提供给你的loader来进行拓展。 ok，重点来了，loader是什么？做什么？在哪做？如果你在这些没了解清楚地情况下去看他的配置和用法，你一定会觉得枯燥万分。 loader是一个函数，该函数读取你的依赖源码，经过逻辑的处理，最终return一个字符串，该字符串可以被转换成AST语法树，所以loader的处理过程发生在转换语法树之前。这句话简单吗？多简单，就是一个函数，接收一个入参，经过处理最终return一个字符串。但是他真的简单吗？这句话是我理解之后对其原理的高度总结（如果你只是为了记住这段话那将没有任何意义）。他需要你了解webpack的编译的整个过程，你才能清晰的知道loader具体发生在哪个环节，指明了方向，如果你真的对此感兴趣，你一定会去了解webpack的编译过程。 当你认真的去了解完webpack的编译过程之后，你一定会回来评论loader原理确实简单。

手写loader

既然我们知道了原理，那我们就能开始搓代码。 step1: 验证 我们先来到入口文件index.js编写这么一句代码(嗯对，就是这么一句):

我是 a

执行webpack打包命令:

打包失败了，官方文档诚不欺我。 step2： 写个loader(我的loader目录src/loader/myLoader.js)

module.exports = (resource)=>{
    return ``
}

step3: 告知webpack，咱loader写是写完了，总得告诉webpack吧不然他咋用咱写的loader呢，官网文档走起:

The test property identifies which file or files should be transformed. The use property indicates which loader should be used to do the transforming.

由此可知，test是用来标识哪个文件应该被转换，use用来指明哪个对应的loader应该被用于转换。好嘞走着，参考官网示例改造咱们自己的配置文件(看我标红的部分):

test用正则来指明以js结尾的文件要被转换，use用我编写的loader来转换。 step4: 重新打包，你成功了你知道吗！

也许你会说，你loader内部什么逻辑都没编写，你成功个锤子，但是思路往往是最重要的，流程是最重要的，只有你认清了运作过程，你才有兴趣去探索别人写的loader。

尾声

我写文章的初衷就是，首先我写的东西我自己能看懂，然后作为初学者掌握了一定的前置知识也可以听得懂，甚至跨行业的人，也能了解个大概。在长达七八年的职业生涯里，我向来是一个人摸爬滚打，我多希望十年前的自己可以关注现在的自己，我不是说要把我现在所知都传授给多年前的自己，而是多希望很早之前有一个人可以以大白话的方式来给我指点方向。而我选择把这份遗憾留给自己，把更多的机会留给各位。我们活着就是利用我们所知所学能去尽可能的做点什么，或者改变点什么，尽管这很难，我依然想通过自己的一份力量，在这个被利益所充斥的社会，为大环境带来哪怕一点点的改变。