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>

当然，我的视野不好。

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" ]
          }
        ]
      },

      // ...
    ]
  }
}

评论

老实说，我不知道我们为什么需要?in resourceQuery: /^\?vue/u,（欢迎解释）。但是，在上面的开发构建模式下，configxxxx.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;
}

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

复制品

GitHub

第 1 步：安装依赖项

npm i

第 2 步：让我们先检查开发建筑

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        // <----
    }                             // <----
  }
},