Загрузчики Webpack Pug/HTML преобразуют заглавные буквы в строчные в производственном режиме

Я использую как однофайловые компоненты vue, так и разделение разметки и логики на файлы .pug и .ts соответственно. Если вам интересно, почему я не унифицирую, пожалуйста, смотрите раздел комментариев.

Проблема

import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";

console.log(template);

@Component({
  template,
  components: {
    CompoundControlBase
  }
})
export default class InputField extends Vue {
    // ...
}

В режиме разработки экспортированный шаблон правильный (я украсил его для удобства чтения):

<CompoundControlBase 
  :required="required" 
  :displayInputIsRequiredBadge="displayInputIsRequiredBadge"
    <TextareaAutosize 
      v-if="multiline" 
      :value="value" 
    /><TextareaAutosize>
</CompoundControlBase>

В производственном режиме моя разметка была в нижнем регистре. Итак, console.log(template) выводит:

<compoundcontrolbase 
    :required=required 
    :displayinputisrequiredbadge=displayInputIsRequiredBadge 
    <textareaautosize 
        v-if=multiline 
        :value=value 
    ></textareaautosize>
</compoundcontrolbase>

Конечно, у меня сломался вид.

Конфигурация веб-пакета

const WebpackConfig = {

  // ...
  optimization: {
    noEmitOnErrors: !isDevelopmentBuildingMode,
    minimize: !isDevelopmentBuildingMode
  },
  module: {
    rules: [
      
      {
        test: /\.vue$/u,
        loader: "vue-loader"
      },
      {
        test: /\.pug$/u,
        oneOf: [
          // for ".vue" files
          {
            resourceQuery: /^\?vue/u,
            use: [ "pug-plain-loader" ]
          },
          // for ".pug" files
          {
            use: [ "html-loader", "pug-html-loader" ]
          }
        ]
      },

      // ...
    ]
  }
}

Честно говоря, я не знаю, зачем нам ? в resourceQuery: /^\?vue/u, (объяснения приветствуются). Однако в режиме разработки вышеописанное свойство конфигурации работает как для файлов xxxx.vue, так и для файлов xxxx.vue.pug.

Я использую ниже соглашение об именах файлов:

xxx.pug: файл pug, который не будет использоваться в качестве шаблона компонента vue.
xxx.vue.pug: файл pug, который будет использоваться в качестве шаблона компонента vue.
xxx.vue: однофайловый компонент vue.
xxx.vue.ts: логика компонента vue. Требуется экспортированный шаблон из xxx.vue.pug как в случае InputField.

Зачем мне xxx.vue.ts? Из-за этого:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Ни общедоступные методы/поля, ни методы не по умолчанию не видны для файлов TypeScrpt xxx.vue. Для общих (не прикладных) компонентов я не могу принять это.

Репро

???? GitHub

Шаг 1: Установите зависимости

npm i

Шаг 2: Давайте сначала проверим здание разработки

npm run DevelopmentBuild

В строке 156 из DevelopmentBuild\EntryPoint.js вы можете проверить следующий шаблон мопса:

Alpha
  Bravo OK

правильно скомпилировано:

Шаг 3: Проблема с производственной сборкой

npm run ProuductionBuild

Вы можете найти теги в нижнем регистре в столбце 13:

Вы также можете открыть index.html в своем браузере и проверить вывод console.log() с помощью скомпилированного файла TestComponent.

Takeshi Tokugawa YD 30.07.2020 источник

Ответы (1)

arrow_upward
3
arrow_downward

Проблема в html-загрузчике. Для параметра minimize установлено значение true в производственном режиме (html-loader/#minimize< /а>).

У меня была аналогичная проблема в angular, и мне пришлось отключить некоторые параметры, например (см. для справки html-minifier-terser#options-quick-reference).

// webpack.config.js
{
  test: /\.pug$/u,
  oneOf: [
    // for ".vue" files
    {
      resourceQuery: /^\?vue/u,
      use: [ "pug-plain-loader" ]
    },
    // for ".pug" files
    {
      use: [ "html-loader", "pug-html-loader" ]
    }
  ],
  options: {
    minimize: {                   // <----
      caseSensitive: false        // <----
    }                             // <----
  }
},

Sven 31415 06.08.2020

comment

Спасибо за ответ. Ваше решение не работает, но это была подсказка, благодаря которой я решил свою проблему. Я отредактировал ваш ответ. - Takeshi Tokugawa YD; 07.08.2020