自定义webpack-loader实现vue文件添加name

相信有不少用过Vue.js的人，或多或少都有使用过keep-alive这个属性吧（没用过的和忘了的自行去官网复习一下），这里的Vue版本为Vue2。

那么我们在使用的同时，大家都知道需要传入对应组件的name属性才能使缓存生效（当然也有不知道的），当然前提是你必须为组件命名，so，有的同学在开发过程中ctrl C+V的时候容易忽视这个问题怎么办？

于是，我写了个loader帮助大家做这个事情，我将他命名为vue-name-loader，确实很土...

但是实用（红脸吹牛，毕竟没系统性的测过），递上链接 https://www.npmjs.com/package/vue-name-loader。

功能介绍：

1.可将vue文件动态添加name值

2.如果有多个路由使用相同组件，可传入自定义name区分

使用方法：

1.引入依赖

npm install vue-name-loader

2.打包配置，这里以vue.config.js为例

config.module
      .rule('vue')
      .exclude.add(resolve('node_modules')).end()
      .use('my-loader')
      .loader('vue-name-loader')
      .end()
      .use('vue-loader')
      .loader('vue-loader')
      .end()

3.使用方法，可传入componentName自定义组件名称，也可不传（默认以文件名命名）

import App from './App.vue?componentName=detail1'

console.log(App.name)

具体实现可去git查阅，这里不再累述，欢迎大家提意见。