webpack--手写loader

$\bullet$ 背景

项目中的面包屑导航需要每次在组件中引入、注册并使用，考虑做优化：只引入并注册使用一次，且要能满足一些特殊情况

$\bullet$ 分析

$\ast$ 引入一次的实现比较简单，只需要在视图出口或者根组件引入即可

$\ast$ 特殊情况指的是：局部引入、不使用面包屑

不使用面包屑比较简单，只需要做个close标识即可，但是这个标识怎么传递给在根组件显示的面包屑是个问题，比较通俗的做法是使用eventBus或者vuex来发送一个message，又或者，在全局做一个配置文件，然后在面包屑组件中去读取，这还不算很麻烦

当局部引入时，不仅要关闭全局的面包屑，还要保证局部生效，这也就意味着，我们至少还需要一个属性来做标识，这样就比较麻烦了....

$\bullet$ 改造目标

既要满足上述需求，又不需要使用者太麻烦

$\bullet$ 实现

$\ast$ 选择在app.vue中引入来达到面包屑提升的目的

$\ast$ 通过v-close-crumbs关闭全局面包屑，同时允许局部引入使用以满足特殊用法

只要使用者在根元素指定了v-close-crumbs，我们就在loader内开始一些增删操作，这本质上是字符串操作

框红一的位置，对该指令作判断，只有标记了该属性的才进入我们的逻辑

框红二的位置，将指令删除，否则在vue编译阶段会报指令不存在

框红三的位置，向面包屑传递属性标识是否是局部使用

框红四的位置，向全局面包屑发消息，以控制其显示或隐藏

之后，在面包屑组件作监听，以控制其显示或隐藏

最后，将我们的loader发布到npm后，并在webpack中引用即可