One option for webpack users is to install [**directory-named-webpack-plugin**][1]

Install, and then add the following to Webpack's config file:

```js
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.


[1]: https://www.npmjs.com/package/directory-named-webpack-plugin

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.