webpack使用Handlebars时.hbs后缀文件不生效、.handlebars后缀正常是什么原因

• loader匹配规则未覆盖.hbs后缀
  绝大多数该问题都是webpack配置中handlebars对应的loader仅配置了匹配.handlebars后缀的规则，未加入.hbs的匹配逻辑，导致.hbs文件被当成未知资源处理，未经过对应loader编译。
  正确配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(handlebars|hbs)$/, // 同时匹配两种后缀
        loader: 'handlebars-loader'
      }
    ]
  }
}

• webpack自动后缀解析规则未包含.hbs
  如果你在代码中导入模板时省略了后缀（例如import tpl from './index'），需要在webpack的resolve.extensions配置中加入.hbs，否则webpack仅会识别该配置内列出的后缀，无法定位到.hbs文件。
  配置示例：

// webpack.config.js
module.exports = {
  resolve: {
    // 可根据实际使用场景调整后缀顺序，常用后缀放前面可提升解析速度
    extensions: ['.js', '.json', '.hbs', '.handlebars']
  }
}

• handlebars-loader版本兼容问题
  你使用的是4.0.6版本的Handlebars，若配套的handlebars-loader版本过高或过低，可能出现默认仅识别.handlebars后缀的问题，可在loader参数中手动指定支持的后缀：

{
  test: /\.(handlebars|hbs)$/,
  loader: 'handlebars-loader',
  options: {
    extensions: ['.hbs', '.handlebars']
  }
}

• 第三方插件配置冲突
  如果同时使用了html-webpack-plugin等模板处理类插件，需要确认插件的模板解析规则是否限制了仅识别.handlebars后缀，按需调整对应插件配置即可。

小提示：修改配置后若仍不生效，可尝试清除webpack打包缓存后重新编译，避免旧缓存影响配置生效。

内容的提问来源于stack exchange，提问作者yusufcanvar