为什么使用此resolve.alias配置时Webpack会引发错误？

Question

使用包含另一个别名的子字符串的别名键会导致错误。

//in this given file structure
src
|--app
|   |--module.js
|--component
|   |--module.js
|--config
    |-config.js

//and config
alias: {
     'base': path.resolve('src/config'),
     'base/app': path.resolve('src/app'),
     'base/component': path.resolve('src/component')
}

import app from 'base/config'
按预期工作，返回模块src / config.js

import app from 'base/app/module'
找不到模块：错误：无法解析“基础/应用/模块”

import app from 'base/component/module'
找不到模块：错误：无法解析“基础/组件/模块”

Answer 1

我认为这与webpack的增强解析AliasPlugin工作方式有关。 通过将另一个base用作别名，并让其他别名以base/开头，您会在此逻辑中触发您不希望的误报，因为该路径实际上未低于base指向的位置（对于base/app ， /src/app不在/src/config之下）

因此，您可以为此实例使用另一个定界符（ _ ），或者更好地设置别名，使其行为符合Webpack的意图，以避免将来破坏更改。

---

因此，您可以将/替换为另一个字符，如下所示：

alias: {
     'base': path.resolve('src/config'),
     'base_app': path.resolve('src/app'),
     'base_component': path.resolve('src/component')
}

// ...
import app from 'base_app/module'

或者，如果这不理想，则可以重新定义别名，以完全避免出现此问题：

alias: {
     'base': path.resolve('src')
}

// ...
import config from 'base/config'
import app from 'base/app/module'