javascript - 为什么使用这个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')
}

从“base/config”导入应用
按预期工作，返回模块 src/config.js

从“base/app/module”导入应用
找不到模块:错误:无法解析“base/app/module”

从“基础/组件/模块”导入应用
找不到模块:错误:无法解析“基础/组件/模块”

Answer 1

我相信这与 webpack's enhanced-resolve 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'