[TOC]

记录vue文件模板中标签的loader

记录vue文件中template中所有的html标签, 无论是原生的标签还是组件标签， 都会被记录。

使用

初始化:

yarn add -D vue-record-tags-loader

在webpack配置中配置该loader:

const { clear: clearTagsLoaderStore } = require('vue-record-tags-loader/lib/store');

// 在每次构建时， 都清空上一次存储信息。
clearTagsLoaderStore();

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
            loader: 'vue-record-tags-loader'
          }, {
            loader: 'vue-loader',
            options: {
              //...
            },
          }]
      },
    ]
  }
};

注意:

• 该loader注意配置在vue-loader之前。
• 并且在每次构建时 最好清空缓存

获取记录信息

vue-record-tags-loader解析vue文件得来的信息会存在文件系统中, 通过vue-record-tags-loader/lib/store获取:

const { get } = require('vue-record-tags-loader');

const tags = get(filePath);

get函数获取指定文件的标签列表， 传入的参数时文件路径， 需要时绝对路径。

为了避免上次构建残留的信息对本次构建影响， 请在构建前， 清除存储。