配置 Webpack 以查找与目录名称匹配的文件

Question

我正在为 React 应用设置环境。我正在使用 Babel 和 Webpack。

目前，我的所有组件都按照以下命名方案在文件中实现：

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

现在，我可以导入这些组件的唯一两种方法是创建 index.js 或 package.json 文件，然后将它们指向 Javascript 文件，或者编写完全进口； import Component1 from '/components/Component1/Component1

是否可以配置 Webpack 以便在查找 index.js 和 package.json 后，它会查找与当前目录名 + .js 匹配的文件？

Answer 1

在当前的 webpack resolve configuration.

中找不到实现这个的方法

但这里有一些我发现的 directory-named-webpack-plugin 插件，它应该完全符合您的要求。

我还打开了一个 issue 功能提案。

配置 Webpack 以查找与目录名称匹配的文件

Configure Webpack to look for files matching directory name

development-environment

webpack

webpack-loader