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

      // ...
    ]
  }
}

评论

老实说，我不知道为什么我们在resourceQuery: /^\?vue/u,中需要?（欢迎解释）。 但是，在开发构建模式中，上面的配置对 xxxx.vue 和 xxxx.vue.pug 文件都有效 属性。

我使用以下文件命名约定：

• xxx.pug: 不会用作vue组件模板的pug文件。
• 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 methods/fields 和非默认方法都不可见。对于普通（非应用）组件，我不能接受。

复制

GitHub

第 1 步：安装依赖项

npm i

第二步：先看看开发楼

npm run DevelopmentBuild

在 DevelopmentBuild\EntryPoint.js 的第 156 行，您可以检查下面的 pug 模板：

Alpha
  Bravo OK

已正确编译：

第 3 步：生产构建问题

npm run ProuductionBuild

您可以在 13:

列中找到小写的标签

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

Answer 1

问题是“html-loader”。它在生产模式 (html-loader/#minimize) 中将选项 minimize 设置为 true。

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