title: Importing JavaScript files with the same name as directory they're inside
body: <p>In my React and Webpack project, I have the following project structure of React components:</p>
  
  <pre><code>Component/
  ├── Component.jsx
  ├── index.jsx
  └── styles.css
  </code></pre>
  
  <p>The <code>index.jsx</code> file simply imports and exports <code>Component.jsx</code>; the reason being that in files that require it, it allows the usage of the following:</p>
  
  <pre><code>import Component from '../Component'
  </code></pre>
  
  <p>as opposed to</p>
  
  <pre><code>import Component from '../Component/Component'
  </code></pre>
  
  <p>However this seems like it may be an unnecessary extra step which requires all new components to follow suit.</p>
  
  <p>With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have <code>Component.jsx</code> and <code>styles.css</code> in my directory, but not have to use the name twice in my <code>import</code> declaration.</p>