## 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 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和[更多其他特性](https://webpack.docschina.org/loaders)。 ## 实例 实例：把`.md`格式文件插入到`.vue`文件对应（插槽）位置，这样就可以`.md`文档格式编写文章，并统一设定文章布局等功能了。了解更多`loader`[传送](https://webpack.docschina.org/concepts/loaders/)。 如下图，左侧代码右侧效果：  ### 1、自定义loader，它实质上就是个函数 ***** 借助 [hyperdown](https://www.npmjs.com/package/hyperdown/v/2.4.3)解析器和 [prismjs](https://www.npmjs.com/package/prismjs)装逼用（高亮等效果），哈哈哈。 其次，这里通过`replace()`方法替换对应的字符即可，这个看具体`loader`的需求了 ``` const HyperDown = require('hyperdown'); const Prism = require('prismjs'); ```  ### 2、不用多说，使用loader ***** 在配置`loader`的地方，通过`require.resolve()`即可，别忘了加上 `test: /\.md$/`指定文件格式和顺序（从右到左或从下到上）哦。  ### 3、.vue文件中使用.md ***** 使用就简单了，`.vue`文件作为父级组件，`.md`文件作为子组件使用。  ### 4、其他 ***** 项目地址： https://github.com/wwmingly/vue-demo.git 参考地址：https://webpack.docschina.org/concepts/loaders/#using-loaders