React Webpack 4解决别名 [英] React Webpack 4 Resolve Alias

问题描述

我在使用WebPack获取解析别名以在我的React应用程序中工作时遇到了困难，而且我从Google搜索结果中尝试的所有内容似乎都没有作用.

I'm having difficulty getting resolve alias to work in my React app using WebPack, and everything I've tried from google results don't seem to make a difference.

这是我从webpack中得到的解决方案.

Here is my resolve from webpack.

C:\ website \ webpack.config.js

C:\website\webpack.config.js

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

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

Here is C:\website\app\components\Accounts\Accounts.js

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

，我有一个文件位于C:\ website \ app \ services \ api \ ApiAccounts.js 将上面的行更改为下面的行:

and I have a file located in C:\website\app\services\api\ApiAccounts.js Changing the above line to the below works:

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

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

For fullness, here are my webpack dependencies:

"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"

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

任何人都可以看到关于我所缺少的内容的明显信息，或者应该尝试尝试使其正常运行，或者是否可以通过某种方式调试webpack来查看别名的实际使用情况(实际上是在使用什么路径)在吗?

Can anyone see anything obvious as to what I'm missing, or should try to try and get this working, or even if there is a way to debug webpack to see what path it is actually using if the alias is actually kicking in?

谢谢！

推荐答案

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

The only thing I was missing was the dot before /app!

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

这篇关于React Webpack 4解决别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！