Question

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

但是，我的代码编辑器现在已经完成了名为index.js的选项卡。然后按Ctrl + Shift + P查找现在有一个index.js＆＃39的BUNCH

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

import blah from './blah/blah`

现在，只要键入一个额外的/blah，我就不会太啰嗦了。但我只是想知道，是否有可能使js文件与文件夹的名称相同，因为它将index.js？

Answer 1

Github用户shaketbaby制作了webpack plugin，以问题的方式处理导入。

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

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

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

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

如果第一个参数是true，则解析器将回退到先前的行为如果找不到blah/index.js，则blah/blah.js。

Answer 2

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

{
   "main":"blah.js"
}

Answer 3

另一个选择：

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

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

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

3 个答案: