Webpack 4解析具有多个可能位置的别名

Question

我的项目的源代码分为两部分：共享组件和特定于站点的组件。看起来像这样：

/root/
  /shared/
    component1.js
    component2.js
  /site/
    component2.js
    component3.js

任何组件都可以使用以下语法导入另一个组件：

component3.js:
  import Component1 from '~/component1'
  import Component2 from '~/component2'

我希望webpack在/ site /文件夹中查找任何组件，如果找不到，则在/ shared /文件夹中查找。

我正在寻找webpack的解析别名和模块的适当组合以实现这一目标。

1. 当前，我使用很多符号链接。因此，指向component1的链接位于站点文件夹中，最后一个文件夹指定为webpack入口点。它可以工作，但是实际项目中却有很多符号链接。

2. 我希望〜路径具有两个别名：/ site /和/ shared /。像这样：

resolve: {
  alias: {
    '~': ['/path/to/site', '/path/to/shared']
  }
}

但是它不起作用，因为别名值应该是字符串。

1. 让我们尝试一下模块：

modules: [
  '/path/to/site',
  '/path/to/shared',
  'node_modules'
]

导入命令将更改为import Component1 from 'component1'。看来可行，但是如果我的某些组件与node_modules中的某些软件包具有相同的名称，该怎么办？我必须以某种方式区分它们。