Reactjs 网页包自动解析index.whatever.jsx

使用webpack解析我的导入时：

/component/thing/index.jsx
/component/stuff/index.jsx

可以像这样进口吗

import Thing from './component/thing';
import Stuff from './component/stuff';

因为index.jsx是自动解析的。问题是现在我的项目中有大量名为index.jsx的文件，这使得搜索文件既困难又烦人。是否有一种方法可以配置webpack以接受以下内容：

/component/thing/thing.index.jsx
/component/stuff/stuff.index.jsx

但仍然允许像上面这样的速记输入

---

我的第一反应是（在网页中）：

但这并没有解决问题。有可能完成我想要的吗？

这可能会对您有所帮助

我还没试过。但是根据描述，你应该可以做这样的事情

resolve: {
  plugins: [
    new DirectoryNamedWebpackPlugin({
      transformFn: function(dirName) {
        // use this function to provide custom transforms of resolving directory name 
        // return desired filename or array of filenames which will be used 
        // one by one (honoring order) in attempts to resolve module 
        return [dirName + ".index", dirName + "/" + dirName + ".index"]
      }
    })
  ]
}

我不确定这个

transformFn

是如何工作的，这就是为什么我将两个可能的路径作为一个数组返回的原因。用它做一些实验，你就能在你的案例中找到正确的返回路径

此外，请确保您正在使用基于您的网页版本的插件版本。

这可能会对您有所帮助

我还没试过。但是根据描述，你应该可以做这样的事情

resolve: {
  plugins: [
    new DirectoryNamedWebpackPlugin({
      transformFn: function(dirName) {
        // use this function to provide custom transforms of resolving directory name 
        // return desired filename or array of filenames which will be used 
        // one by one (honoring order) in attempts to resolve module 
        return [dirName + ".index", dirName + "/" + dirName + ".index"]
      }
    })
  ]
}

我不确定这个

transformFn

是如何工作的，这就是为什么我将两个可能的路径作为一个数组返回的原因。用它做一些实验，你就能在你的案例中找到正确的返回路径

---

此外，请确保您使用的是基于您的网页版本的插件版本。

是否必须使用folder/index.js结构？您可以在

/component

文件夹中安装

thing.js

，这样您就可以使用webpack resolve以速记方式导入内容，就像上面所述：

import Thing from 'component/thing';
import Stuff from 'component/stuff';

网页包解析将如下所示：

resolve: { 
    modules: [__dirname, 'node_modules'], 
    extensions: ['.js'] 
}

---

您必须使用folder/index.js结构吗？您可以在

/component

文件夹中安装

thing.js

，这样您就可以使用webpack resolve以速记方式导入内容，就像上面所述：

import Thing from 'component/thing';
import Stuff from 'component/stuff';

网页包解析将如下所示：

resolve: { 
    modules: [__dirname, 'node_modules'], 
    extensions: ['.js'] 
}

---

我试图将我的组件分离到它们自己的文件夹中以保持结构的干净。我试图将我的组件分离到它们自己的文件夹中以保持结构的干净。