React Webpack 4 Résoudre les alias

Question

J'ai des difficultés à faire fonctionner l'alias de résolution dans mon application React en utilisant WebPack, et tout ce que j'ai essayé à partir des résultats de google ne semble pas faire de différence.

Voici ma résolution à partir de webpack.

C:\website\webpack.config.js

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

Voici C:\website\app\components\Accounts\Accounts.js

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

et j'ai un fichier situé dans C:\website\app\services\api\ApiAccounts.js En remplaçant la ligne ci-dessus par la ligne ci-dessous, cela fonctionne :

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

Pour être complet, voici mes dépendances webpack :

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

et pourtant je continue à obtenir l'erreur suivante

ERREUR dans ./app/components/Accounts/Accounts.js Module non trouvé : Erreur : Can't resolve '/apiAlias/ApiAccounts.js' in ' C:\website\app\components\Accounts '

Est-ce que quelqu'un peut voir quelque chose d'évident sur ce que j'ai manqué, ou sur ce que je devrais essayer de faire pour que cela fonctionne, ou même s'il y a un moyen de déboguer webpack pour voir quel chemin il utilise réellement si l'alias fonctionne vraiment ?

Merci !

Answer 1

La seule chose qui me manquait était le point avant /app !

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

Answer 2

Ce que vous pouvez faire, c'est supprimer le premier '/' de votre importation ApiAccounts :

import ApiAccounts from 'apiAlias/ApiAccounts.js';

De cette façon, votre chemin d'importation commence avec la clé de votre objet alias, qui dans votre cas est 'apiAlias'.