webpack加载ts-loader不生效，提示无对应loader处理.tsx文件报错

以下是按优先级排序的排查修复步骤：

• 第一步：补全webpack配置中的resolve.extensions字段，添加.ts和.tsx后缀，webpack默认只识别JS类后缀，未配置的情况下不会触发对应loader处理TS/TSX文件。
  配置示例：

  module.exports = {
    // 原有其他配置
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      // 可同步tsconfig的paths配置添加alias，避免路径引入报错
      alias: {
        'app': path.resolve(__dirname, 'src')
      }
    }
  }
  

• 第二步：修正includePaths配置，移除无效的package.json路径，loader的include配置仅需要匹配源文件所在目录：

  const includePaths = [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'test'),
  ];
  

• 第三步：确认依赖安装完整，执行以下命令安装缺失依赖：

  npm install typescript ts-loader -D
  

• 第四步：重启webpack编译服务，webpack配置修改后必须重启才会生效，若使用热更新服务也需要完全重启进程。
• 第五步：若上述步骤执行后仍报错，可临时开启ts-loader的transpileOnly参数跳过类型检查，先确认编译流程是否通顺：

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        }
      }
    ],
    include: includePaths,
  }
  

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