我手写了一个loader
我们知道webpack只能处理js文件，对于非js的文件以及其他处理是通过loader来进行打包和plugin利用webpack声明周期进行相应的操作。
Webpack的loader本质上就是一个函数，对给定的输入进行处理，然后输出webpack能够识别的js代码。知道这一点，其实写loader就很简单了。
# 缘由
关于为什么想写一个loader呢，是因为我在写博客过程中，会参考很多其他博客、网站上面的内容，往往会贴在文章的末尾，但是读者并不知道是来自哪个网站的，可能想进一步点击的兴趣不会很大，同时也有可能不会信任这个链接。我在想如果可以把链接是归属于那个网站的，自己后来进一步查看的时候也会更方便，这样子问题不就解决了嘛！
这里我写的loader是用来处理.md格式文件，在.md格式输出.html文件时，在对应的链接中添加上归属网站的favicon.ico，这就是网站的鲜明标识了。
# 原理
loader本质上是运行在node环境下的一个模块，所以会导出内容；loader的功能一般比较单一，一般只做单一的功能；如果多个loader来处理同一个文件，是链式调用的，依次从右往左进行调用，右边的输出作为左边的输入。
# 一个简单的loader书写
# 1. 初始化项目
初始化项目
npm init -y
安装依赖
既然要写webpack的loader，自然要安装webpack以及webpack的脚手架、还有热更新服务器。(注意咱们用的是webpack5.0版本)
npm install webpack webpack-cli webpack-dev-server -D
新建一个index.html文件
在dist文件目录下，建立一个模板html文件，并引入打包后的.js文件。
<body>
<script src="./bundle.js"></script>
</body>
2
3
新建入口文件
入口文件放在src/index.js，也就是后续webpack打包的入口，打包后的js文件即引入到上一步的index.html中。
创建
webpack.config.js文件
这一步很重要，面试的过程经常会问，在vue项目中webpack是自己配置的，还是有@vue/cli脚手架配置的，这里其实想考察的是对于webpack的理解。
参考文章：