React中如何配置Webpack实现文件夹自动导入index.ts模块？

这个问题我之前也碰到过，其实就是Webpack和TypeScript的模块解析规则没配置到位，按下面几个步骤操作就能实现你想要的导入方式：

1. 配置Webpack的resolve选项 #

Webpack默认不会自动把文件夹路径映射到index.ts，需要在webpack.config.js里明确配置解析规则：

module.exports = {
  // 其他项目配置...
  resolve: {
    // 让Webpack自动尝试解析这些后缀名，导入时就可以省略.ts后缀
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    // 指定文件夹的入口文件名，默认就是index，但明确配置能避免各种潜在问题
    mainFiles: ['index']
  },
  module: {
    rules: [
      // 别忘了配置TS文件的处理loader，确保Webpack能编译TS代码
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

2. 调整TypeScript的编译配置 #

TypeScript编译器也需要识别这种文件夹导入的规则，否则会报“找不到模块”的错误，修改tsconfig.json：

{
  "compilerOptions": {
    "module": "ESNext", // 根据你的项目模块规范选择，比如CommonJS也可以
    "moduleResolution": "node", // 关键！让TS采用Node.js的模块解析逻辑，支持文件夹导入index文件
    "target": "ES6",
    "allowSyntheticDefaultImports": true, // 如果你用export default导出模块，开启这个避免TS报错
    "esModuleInterop": true,
    "strict": true,
    "include": ["src/**/*"] // 确保src下所有TS文件都被编译器处理
  }
}

3. 确保模块正确导出 #

最后检查你的src/Foo/index.ts是否用默认导出：

// src/Foo/index.ts
// 示例模块内容
const Foo = {
  sayHello: () => console.log('Hello from Foo!')
};

// 必须用export default，才能对应import Foo from "./Foo"的导入方式
export default Foo;

做完这些配置后，重新启动Webpack开发服务，就能正常用import Foo from "./Foo"导入模块了。

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