Question

我正在尝试这样做：

文件结构

/app
/app/components
/app/containers
/app/reducers
/app/actions

我希望能够访问/app中的任何文件并执行此类导入

import {ComponentA} from 'components'

无需在包含以下内容的每个文件夹中都有index.js：

应用/组件/ index.js

export * from './ComponentA'
export * from './ComponentB'

我在想我可以使用webpack resolve做到这一点，但我无法弄清楚如何以正确的方式做到这一点。有什么想法吗？

Answer 1

您需要require.context： https://webpack.github.io/docs/context.html

例如要求包括＆＃34;任务＆＃34;中的子目录在内的所有内容。夹： require.context（＆＃34; ./ modules / tasks /＆＃34;，true，/。* /）;

Answer 2

我认为您应该使用resolve属性的root和modulesDirectories参数的组合。首先，您必须设置新模块树的根，因为它在文档的示例中是：

var path = require('path');

// ...
resolve: {
  root: [
    path
  ]
}

如果需要，您可以使用 app 文件夹中特定的子文件夹列表从中导入，只需执行以下操作：

resolve: {
  modulesDirectories: [ 'node_modules', 'app' ]
}

需要第一个参数才能从原始 node_modules 文件夹导入。

然后您可以按如下方式导入：

import ComponentA from 'components';

但请确保组件和其他同级文件夹与 node_modules / package / lib / Module 之类的 node_modules 结构类似，并且您的案例 app / components / lib / ComponentA 在组件的根目录中包含 package.json 和files部分。

如何使用webpack resolve从目录导入文件

2 个答案: