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 {
    // ...
}

在开发构建模式下导出的模板是正确的（为了可读性我对其进行了美化）：

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 {
    // ...
}

在生产模式下，我的标记已小写。所以，console.log(template)输出：

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

当然，我的视野被破坏了。

Webpack 配置

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？因为这：

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

公共方法/字段和非默认方法对于 TypeScrptxxx.vue文件都不可见。对于常见的（非应用的）组件，我无法接受。

再现

GitHub

第1步：安装依赖项

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）。

我在角度方面遇到了类似的问题，必须取消设置一些选项，例如（请参阅参考资料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        // <----
    }                             // <----
  }
},