React Webpack 4 解决别名

Question

我在使用 WebPack 在我的 React 应用程序中获得解析别名时遇到了困难，而且我从谷歌结果中尝试的所有内容似乎都没有任何区别。

这是我在 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"
 }

但我不断收到

的错误

./app/components/Accounts/Accounts.js 中的错误 未找到模块：错误：无法解析“C:\website\app\components\Accounts”中的“/apiAlias/ApiAccounts.js”

任何人都可以看到我遗漏的任何明显的东西吗，或者应该尝试让它工作，或者即使有一种方法可以调试 webpack 以查看它实际使用的路径，如果别名实际上正在踢在？

谢谢！

Answer 1

我唯一缺少的是 /app 之前的点！

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

Answer 2

您可以做的是删除 ApiAccounts 导入中的第一个 '/'：

import ApiAccounts from 'apiAlias/ApiAccounts.js';

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