html - Webpack Pug/HTML 加载器在生产模式下将大写字母转换为小写字母

Question

我同时使用 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 : 将用作 vue 组件模板的 pug 文件。

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 的公共(public)方法/字段和非默认方法都不可见文件。对于常见的(非应用的)组件，我不能接受。
再现
🌎 GitHub
第一步:安装依赖

npm i

第二步:我们先检查一下开发楼

npm run DevelopmentBuild

在线 156 的 DevelopmentBuild\EntryPoint.js ，您可以检查以下 pug 模板:

Alpha
  Bravo OK

已正确编译:

第 3 步:生产构建问题

npm run ProuductionBuild

您可以在 列中找到小写的标签。 13 :

您也可以打开 index.html在浏览器中查看 console.log()编译后的输出 TestComponent .

Answer 1

问题是“html-loader”。它有选项 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        // <----
    }                             // <----
  }
},