如何配置React应用，实现导入模块时无需指定index？

因为你已经执行了npm run eject，所以可以直接修改webpack配置来实现这个需求，具体操作如下：

1. 打开webpack配置文件 #

找到项目根目录下的config/webpack.config.js文件——这是eject后才会暴露出来的核心配置文件。

2. 修改resolve配置块 #

在文件里搜索resolve:，找到对应的配置对象，然后做以下调整：

配置src路径别名（最直接的方式）

在resolve.alias中添加src的路径映射，让webpack能正确识别你写的src/xxx格式路径：

resolve: {
  // 保留原有配置，比如已有的别名、extensions等
  ...,
  alias: {
    // 继承原来的别名配置（避免覆盖默认设置）
    ...(config.alias || {}),
    // 添加这一行，把'src'映射到项目的src目录
    'src': path.resolve(__dirname, '../src'),
  },
}

确认目录入口文件设置

webpack默认会把index作为目录的默认入口文件，你可以确认resolve.mainFiles是否包含index（一般默认已经配置好了，不需要额外修改）：

resolve: {
  ...,
  mainFiles: ['index'], // 默认值，确保存在即可
}

确保支持jsx后缀自动解析

检查resolve.extensions里是否包含.jsx，这样导入时就不需要写文件后缀：

resolve: {
  ...,
  extensions: ['.js', '.jsx', '.json', '.mjs'], // 确保有.jsx在列表里
}

3. 重启开发服务器 #

修改完配置后，一定要重启你的React开发服务器（停止当前的npm start，再重新运行），新配置才会生效。

现在你就可以用import Sample from "src/views/sample"来导入组件了，webpack会自动找到src/views/sample/index.jsx文件。

另外，如果你想更简化路径（比如直接写import Sample from "views/sample"），可以把src目录加入到resolve.modules中：

resolve: {
  ...,
  modules: [paths.appSrc, 'node_modules', paths.appNodeModules],
}

这样webpack会优先在src目录下查找模块，根据你的需求选择即可。

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