Vue 加载器

# 自定义块

您可以在 *.vue 文件中定义自定义语言块。应用于自定义块的加载器根据块的 lang 属性、块的标签名称以及您在 webpack 配置中的规则进行匹配。

如果指定了 lang 属性，则自定义块将与扩展名为 lang 的文件匹配。

您还可以使用 resourceQuery 将规则与没有 lang 的自定义块匹配。例如，要与 <foo> 自定义块匹配

{
  module: {
    rules: [
      {
        resourceQuery: /blockType=foo/,
        loader: 'loader-to-use'
      }
    ]
  }
}

如果为自定义块找到匹配规则，则将对其进行处理；否则自定义块将被静默忽略。

此外，如果自定义块在被所有匹配的加载器处理后将函数作为最终结果导出，则该函数将使用 *.vue 文件的组件作为参数调用。

# 示例

以下是如何将 <docs> 自定义块注入组件，以便在运行时可用。

为了注入自定义块内容，我们将编写一个自定义加载器

module.exports = function (source, map) {
  this.callback(
    null,
    `export default function (Component) {
      Component.options.__docs = ${
        JSON.stringify(source)
      }
    }`,
    map
  )
}

现在我们将配置 webpack 以对 <docs> 自定义块使用我们的自定义加载器。

// wepback.config.js
module.exports = {
  module: {
    rules: [
      {
        resourceQuery: /blockType=docs/,
        loader: require.resolve('./docs-loader.js')
      }
    ]
  }
}

我们现在能够在运行时访问导入组件的 <docs> 块的内容。

<!-- ComponentB.vue -->
<template>
  <div>Hello</div>
</template>

<docs>
This is the documentation for component B.
</docs>

<!-- ComponentA.vue -->
<template>
  <div>
    <ComponentB />
    <p>{{ docs }}</p>
  </div>
</template>

<script>
import ComponentB from './ComponentB.vue';

export default {
  components: { ComponentB },
  data () {
    return {
      docs: ComponentB.__docs
    }
  }
}
</script>

← CSS 提取 →