React Webpack 4 解析别名

Question

我在使用Webpack开发React应用时遇到了解析别名的困难，而且我在Google上尝试过的所有方法都没有起作用。

以下是我的Webpack配置中的解析部分。

C:\website\webpack.config.js

resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
        apiAlias: path.resolve(__dirname, '/app/services/api/')
    }
}

这里是 C:\website\app\components\Accounts\Accounts.js

import ApiAccounts from '/apiAlias/ApiAccounts.js';

我有一个文件位于C:\website\app\services\api\ApiAccounts.js。 将上述行更改为下面的行可起到作用:

import ApiAccounts from '../../services/api/ApiAccounts.js';

为了完整起见，这是我的webpack依赖项：

"devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4"
 }

然而我不断收到这个错误：

ERROR in ./app/components/Accounts/Accounts.js Module not found: Error: Can't resolve '/apiAlias/ApiAccounts.js' in 'C:\website\app\components\Accounts'

有没有人能看出我缺少了什么，或者应该尝试哪些方法来使其正常工作，或者是否有一种可以调试webpack以查看路径实际使用情况的方法，如果别名正在起作用的话？

谢谢！

- Richard Whitehouse

Answer 1

我唯一缺少的就是在/app之前加上一个点!

apiAlias: path.resolve(__dirname, './app/services/api/')

- Richard Whitehouse

---

有点晚了，但我不认为那是解决你问题的方法。查看 https://nodejs.org/api/path.html#path_path_resolve_paths，path.resolve 无论是否带有“.”前缀都可以正常工作。我认为 Nikita 的答案更有可能是正确的。 - Connor Low

Answer 2

您可以在ApiAccounts导入中删除第一个'/'，具体操作如下：

import ApiAccounts from 'apiAlias/ApiAccounts.js';

这样，您的导入路径将以别名对象中的键开头，而在您的情况下，该键是apiAlias。

- user3006493