Как настроить Webpack таким образом, чтобы он мог использовать Pug в классах Single File Components (.vue) и vue-class-component?

Question

Согласно Vue.js documentatin для использования препроцессора pug в компонентах с одним файлом, pug-plain-loader ( not pug-loader ) требуется:

{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

Что делать, если помимо Singe File Components (.vue files) мне также нужно импортировать шаблоны pug в классы TypeScript, предоставляемые vue-property-decorator package (на основе вя-класс-компонент )

Я должен увидеть пример только для загрузки шаблона HTML:

@Component({
  template: require('./MyComponent.html')
})
export default class MyComponent extends Vue {
    //...
}

Что делать, если вместо этого нужно использовать мопса?

@Component({
  template: require('./RegularButton.pug')
})
export default class RegularButton extends Vue {
    //...
}

В этом случае не следует использовать pug-plain-loader:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler">{{ lettering }}</button>
 @ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
 @ ./SPA_Test.ts

Я знаю, что сначала мне нужно установить pug-loader. Но как мне согласовать конфигурацию webpack с настройками pug-plain-loader?

// ...
module: {
  rules: [
    {
      test: /\.ts?$/,
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    },
    {
      test: /\.json5$/,
      loader: 'json5-loader'
    },
    {
      test: /\.(yml|yaml)$/,
      use: ['json-loader', 'yaml-loader']
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    }
  ]
}

---

Обновление: вывод ошибок после первого решения

NonErrorEmittedError: (Emitted value instead of an instance of Error) 

  Errors compiling template:

  text "export default "" outside root element will be ignored.

  1  |  export default "<div class=\"container\"><h1>{{ pageTitle }}</h1><hr><div><div>V-Model Test：</div><div>{{ vModelTestProperty }}</div><div><input type=\"text\" v-model=\"vModelTestProperty\"></div></div><hr><div><div>{{ defaultTextLabel }}</div><div><RegularButton :lettering=\"&quot;Non default button text&quot;\" :onClickEventHandler=\"executeTest\"></RegularButton></div></div></div>"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Object.emitError (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\webpack\lib\NormalModule.js:165:14)
    at Object.module.exports (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\vue-loader\lib\loaders\templateLoader.js:61:21)
 @ ./SPA_Test.vue?vue&type=template&id=cabf1cca&lang=pug& 1:0-422 1:0-422
 @ ./SPA_Test.vue
 @ ./SPA_Test.ts

Компонент:

<template lang="pug">
  .container

    h1 {{ pageTitle }}
    hr

    div
      div V-Model Test：
      div {{ vModelTestProperty }}
      div: input(type='text' v-model='vModelTestProperty')
    hr

    div
      div {{ defaultTextLabel }}
      div: RegularButton(:lettering='"Non default button text"' :onClickEventHandler='executeTest')
</template>


<script lang="ts">

  import { Vue, Component, Prop } from 'vue-property-decorator'

  @Component
  export default class SPA_Test extends Vue {

    private pageTitle: string = 'SPA related test';
    private vModelTestProperty: string = 'Inputted characters will be displayed here';
    private defaultTextLabel: string = 'Default text';

    public executeTest(): void {
      console.log('Test O\'K');
    }
  }
</script>

Не думаю, что решение @ Hammerbot неверно; может быть, это часть правильного решения . Во всяком случае, с настройками

{
  test: /\.vue$/,
  loader: 'vue-loader'
},
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

все работает, если .pug не может быть импортировано внутрь @Component декоратор:

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
  //template: require('./RegularButton.pug') // error will occur
  template: '<button @click="onClickEventHandler">{{ lettering }}</button>'
})
export default class RegularButton extends Vue {

  @Prop({default: 'Default text', type: String}) private readonly lettering!: string;
  @Prop({default: (): void => {}, type: Function}) private readonly onClickEventHandler!: () => {};
}

Answer 1

В соответствии с официальной документацией Vue.js , чтобы использовать vue-loader с pug-plain-loader, необходимо настроить правило загрузчика следующим образом:

Если вы также намерены использовать его для импорта .pug файлов в виде HTML-строк в JavaScript, вам нужно будет связать raw-loader после загрузчика предварительной обработки. Однако обратите внимание, что добавление raw-loader нарушит использование компонентов Vue, поэтому вам нужно иметь два правила, одно из которых предназначается для файлов Vue с использованием resourceQuery, а другое (резервное) предназначено для импорта JavaScript:

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  oneOf: [
    // this applies to `<template lang="pug">` in Vue components
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // this applies to pug imports inside JavaScript
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}

Answer 2

Рабочий раствор:

{
    test: /\.pug$/,
    oneOf: [{
        resourceQuery: /^\?vue/,
        use: ["pug-plain-loader"]
    }, {
        use: [
            "html-loader",
            "pug-html-loader"
        ]
    }]
}