React Webpack 4 解析别名

Question

我很难使用 WebPack 在我的 React 应用程序中使用 resolve 别名，而且我从 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 以查看它实际使用的路径，如果别名是真的开始了吗？

谢谢！

Answer 1

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

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

Answer 2

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

import ApiAccounts from 'apiAlias/ApiAccounts.js';

这样您的导入路径就以别名对象中的键开始，在您的例子中是 apiAlias。

React Webpack 4 解析别名

React Webpack 4 Resolve Alias

reactjs

webpack

import

webpack-4

resolve