Webpack 5+AngularJs项目html-loader报错找不到合适loader如何解决？

1 核心错误：正则匹配规则无效 #

你当前webpack配置中对html文件的匹配正则属于无效语法，webpack无法正确识别.html后缀的文件，完全没有触发配置的loader，所以会抛出找不到对应处理loader的报错：

// 错误写法：大小写修饰符i放在了正则表达式内部
test: /\.html$i/

修正为正确写法：

// 正确写法：修饰符放在正则斜杠外，匹配所有.html后缀的文件（忽略大小写）
test: /\.html$/i

2 不同使用场景的正确配置 #

场景1：仅直接返回模板字符串 #

如果不需要自动注入$templateCache，只需要拿到HTML字符串赋值给指令的template属性，修正正则后就可以正常运行：

module:{
  rules: [
    {
      test: /\.html$/i,
      loader: 'html-loader',
      options: {
        minimize: true,
      }
    },
    // 也可以用raw-loader，webpack5还可以直接用asset/source替代，不需要额外安装loader：
    // {
    //   test: /\.html$/i,
    //   type: 'asset/source'
    // }
  ]
}

场景2：结合ngtemplate-loader使用模板缓存 #

如果要用到ngtemplate-loader自动把模板注册到AngularJS的$templateCache中，需要注意loader执行顺序：use数组从后往前执行，先让html-loader处理HTML内容，再交给ngtemplate-loader封装成模板缓存代码：

module:{
  rules: [
    {
      test: /\.html$/i,
      use: [
        {
          loader: "ngtemplate-loader",
          options: {
            relativeTo: "src/", // 按照你实际的项目源码目录调整
          },
        },
        {
          loader: "html-loader",
          options: {
            minimize: true,
          },
        }
      ]
    }
  ]
}

3 额外注意事项 #

• 检查webpack配置中是否配置了resolve.alias来匹配你代码中的ROOT路径别名，如果没有配置的话，require("ROOT/app/views/templates/dataGrid.html")会因为找不到对应路径报错，需要补充别名配置：

const path = require('path')
module.exports = {
  resolve: {
    alias: {
      ROOT: path.resolve(__dirname, 'src') // 替换成你项目的实际根目录路径
    }
  }
}

• 修正配置后重启webpack devServer，确保新配置生效。

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