loader实践之如何手把手实现一个loader

小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

loader 特性

loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何操作。
loader 可以通过options对象配置（仍然支持使用query参数来设置选项，但是这种方式已被废弃）。
除了常见的通过package.json的main来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用loader字段直接引用一个模块。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和更多其他特性。

实例：把.md格式文件插入到.vue文件对应（插槽）位置，这样就可以.md文档格式编写文章，并统一设定文章布局等功能了。了解更多loader传送。

如下图，左侧代码右侧效果：

借助 hyperdown解析器和 prismjs装逼用（高亮等效果），哈哈哈。
其次，这里通过replace()方法替换对应的字符即可，这个看具体loader的需求了

const HyperDown = require('hyperdown');
const Prism = require('prismjs');

在配置loader的地方，通过require.resolve()即可，别忘了加上 test: /.md$/指定文件格式和顺序（从右到左或从下到上）哦。

使用就简单了，.vue文件作为父级组件，.md文件作为子组件使用。