Как настроить реагирующий проект для разрешения входных файлов на основе имени родительской папки, а не по умолчанию для index.js?

Question

У меня есть проект React, в котором я использую конфигурацию webpack и babel, созданную create-Reaction-app .

Проект имеет похожую структуру:

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       ├── Button.jsx
│       └── index.js
├── otherFolders/
├── App.js
└── package.json

, где index.js всегда выглядит примерно так:

export { default } from './Button.jsx

Я чем импортирую эти компонентыв других частях моего приложения с помощью обычного оператора import:

import Button from 'components/Button'

Я бы хотел опустить файл index.js и заставить файлы разрешения узлов называться так же, как их родительская папка.

Так что для приведенного выше примера это будет выглядеть так:

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       └── Button.jsx
├── otherFolders/
├── app.js
└── package.json

Я считаю, что это можно решить, создав плагин webpack или babel.

Итакмои вопросы:

• Нужно ли писать плагин webpack или babel для этого?
  • Если да, что именно отвечает за разрешение файлов и потребуется ли специальный плагин?
  • Если нет, каковы другие мои варианты для достижения того, чего я хочу?