Question

我在使用WebPack在我的React应用程序中使用解析别名时遇到困难，而我从谷歌搜索结果中尝试的所有内容似乎没有什么区别。

以下是我对webpack的决心。

C：\网站\ 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'）开始。

React Webpack 4解析别名

2 个答案: