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

【问题标题】：Webpack import from /folder/folder.js instead of /folder/index.js从 /folder/folder.js 而不是 /folder/index.js 导入 Webpack
【发布时间】：2017-03-18 05:19:45
【问题描述】：

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

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

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

import blah from './blah/blah`

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

【问题讨论】：

我觉得不可能。见node.js的moduledoc。
嗯，好的，谢谢@wuxiandiejia

标签： webpack visual-studio-code

【解决方案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 的情况下。

【讨论】：

这确实应该是公认的答案。上面的其他答案表明映射是 not 可能的 - 这是不正确的，正如这篇文章清楚地表明的那样。还有一些相关的包可以通过jest 和babel 分辨率来实现这一点。

【解决方案2】：

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

{
   "main":"blah.js"
}

【讨论】：

有趣的感谢分享！这要好得多，因为它不依赖其他依赖项，而是接受这个。

【解决方案3】：

另一种选择：

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

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

【讨论】：

你可以这样写一行：export {default} from './folder'