javascript - 如何在 webpack 中处理编译后的 Vue 组件？

Question

gettext我想为 Vue.js创建一个类似于 Django 的“宏” 。

如何设置加载器，以便获得已编译（解析）的 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
}

标签： javascriptvue.jswebpack

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
}