Configure Webpack to look for files matching directory name

Question

I'm setting up an environment for a React app. I'm using Babel and Webpack.

Currently, all of my components are implemented in files following this naming scheme:

   /components
          /Component1
                 Component1.js
                 component1.style.scss
                 Component1.test.js
          /Component2
                 Component2.js
                 component2.style.scss

Right now, the only two ways I can import these components is to create an index.js or package.json files, and point them to the Javascript file, or to write the full import; import Component1 from '/components/Component1/Component1

Is it possible to configure Webpack so that after looking for index.js and package.json, it would look for a file that matches the current directory name + .js?

Answer 1

Can't see a way to implement this with current webpack's resolve configuration.

But here is some directory-named-webpack-plugin plugin I found which should do exactly what you want.

I also opened an issue with feature proposal.