Webpack加载器执行顺序及.pug文件加载配置问题排查

核心问题原因 #

你遇到的Uncaught TypeError: ... is not a function，本质是**.vue.pug文件被普通.pug的加载规则错误匹配**，导致输出格式不符合Vue的要求：

• 普通.pug一般被处理成HTML字符串导出
• 而.vue.pug需要被处理成Vue可调用的渲染函数
  当Webpack用普通.pug的加载器处理.vue.pug时，导出的字符串被Vue当作函数调用，自然抛出类型错误。

Webpack加载器的核心匹配逻辑 #

Webpack加载器的匹配遵循两个关键规则：

1. 从上到下匹配规则数组：数组中靠前的规则会先被匹配，一旦命中就不再执行后续规则匹配
2. 正则匹配优先命中宽泛规则：如果你的普通.pug规则的test是/\.pug$/，那么.vue.pug也会被这个正则命中，因为它以.pug结尾

解决方法：精准区分规则 #

你需要调整规则顺序和匹配范围，确保.vue.pug被正确的规则处理：

1. 调整规则顺序+排除冲突文件 #

把.vue.pug的规则放在普通.pug规则前面，同时给普通.pug规则添加排除项，避免错误匹配：

module.exports = {
  module: {
    rules: [
      // 优先处理.vue.pug，适配Vue渲染需求
      {
        test: /\.vue\.pug$/,
        use: [
          'vue-loader',
          {
            loader: '@webdiscus/pug-loader',
            options: {
              runtime: 'vue', // 关键：指定生成Vue兼容的渲染函数
              // 其他pug配置，比如pretty、data等
            }
          }
        ]
      },
      // 处理普通.pug，排除.vue.pug避免冲突
      {
        test: /\.pug$/,
        exclude: /\.vue\.pug$/, // 关键：排除已被上面规则处理的文件
        use: [
          {
            loader: '@webdiscus/pug-loader',
            options: {
              runtime: 'html', // 生成HTML字符串
              // 其他普通pug配置
            }
          }
        ]
      },
      // 基础vue-loader配置（不可少）
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() // 配合vue-loader必须的插件
  ]
};

2. 额外注意点 #

• 确保@webdiscus/pug-loader的runtime配置正确：vue模式生成渲染函数，html模式生成字符串
• 如果还是有问题，可以给.vue.pug的规则加上enforce: 'pre'，强制它在所有普通规则之前执行
• 检查是否有其他插件或规则干扰加载器匹配，比如html-webpack-plugin等对pug的处理

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD