从/folder/folder.js而不是/folder/index.js导入Webpack

Question

使用webpack时，我在./blah/中创建index.js，然后import blah from './blah'它成功地从index.js中获取

但是，我的代码编辑器现在充满了名为index.js的选项卡。 并执行Ctrl + Shift + P来查找具有index.js的BUNCH

因此，我一直在使用与文件夹名称相同的名称index.js。 因此/folder/folder.js 。 但是，如果这样做，我现在所有的import语句都是：

import blah from './blah/blah`

现在对我来说输入一个额外的/blah并不是太冗长。 但是我只是想知道，是否有可能使它以与index.js相同的名称对待与文件夹相同的js文件？

Answer 1

Github用户shockbaby已经制作了一个webpack插件 ，该插件以请求的方式处理导入。

首先将以下内容添加到您的webpack配置中：

const DirectoryNamedPlugin = require("directory-named-webpack-plugin");

const config = {
  ...
  resolve: {
    ...
    plugins: [
      new DirectoryNamedPlugin(true)
    ]
  },
  ...
}
export default config

然后，您可以使用import blah from './blah'中的import blah from './blah'来解析位于./blah/blah.js的文件。

如果第一个参数为true ，则在找不到blah/blah.js的情况下，解析程序将退回到先前的行为blah/index.js 。

Answer 2

解决此问题的另一种方法是在每个文件夹中创建一个package.json ，如下所示：

{
   "main":"blah.js"
}

Answer 3

另外一个选项：

在文件夹folder/ ，创建以下文件index.js ：

import folder from './folder.js';
export default folder;