How to process compiled Vue's component in webpack?

Question

I want to create a "macro" similar to gettext in Django for Vue.js.

How can I setup a loader so that it will get a compiled (parsed) Vue.js component's template tag? It can be either JS or some AST.

Example:

// 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

Simple config can look like this:

// 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
}