Importing JavaScript files with the same name as directory they're inside

In my React and Webpack project, I have the following project structure of React components:

Component/
├── Component.jsx
├── index.jsx
└── styles.css

The index.jsx file simply imports and exports Component.jsx; the reason being that in files that require it, it allows the usage of the following:

import Component from '../Component'

as opposed to

import Component from '../Component/Component'

However this seems like it may be an unnecessary extra step which requires all new components to follow suit.

With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have Component.jsx and styles.css in my directory, but not have to use the name twice in my import declaration.

One option for webpack users is to install directory-named-webpack-plugin

Install, and then add the following to Webpack's config file:

var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}

When using require("component/foo") and the path "component/foo" is resolved to a directory, Webpack will try to look for component/foo/foo.js as the entry point.

Caution: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether. Unless they also have similar functionality, you may lose Go To Definition and Intellisense support by not providing the full reference statically.