Как обработать скомпилированный компонент Vue в веб-пакете?

Question

Я хочу создать «макрос», похожий на gettext в Django для Vue. js.

Как настроить загрузчик так, чтобы он получал скомпилированный (проанализированный) Vue. js компонент template тег? Это может быть JS или какой-то AST.

Пример:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /.vue$/,
      loader: 'vue-loader'
    }, {
      test: /.vue?template/  // just an example
      loader: myLoader
    }]
  }
}


// my-loader.js
module.exports = function (source) {
  // here source is either JS or AST representation
  return source
}

Answer 1

Простой конфиг может выглядеть так:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          'my-loader',  // our custom loader        
        ]
      }
    ]
  }
}


// my-loader.js
const { createDefaultCompiler } = require('@vue/component-compiler')

module.exports = function(source) {
  const compiler = createDefaultCompiler()
  const descriptor = compiler.compileToDescriptor('filename.vue', source)
  const { template } = descriptor;
  console.log(template.ast)  // AST of the component's template tag
}