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

Question

当我在 ./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 文件？

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。