web-dev-qa-db-ja.com

React Webpack 4エイリアスの解決

WebPackを使用してReactアプリでエイリアスを解決するのに苦労しています。また、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"
 }

まだ私はのエラーを取得し続けます

./app/components/Accounts/Accounts.jsモジュールのエラーが見つかりません：エラー：「C：\ website\app\components\Accounts」の「/apiAlias/ApiAccounts.js」を解決できません

誰かが私が不足しているものについて明白な何かを見ることができますか、これを動作させようとする必要がありますか、エイリアスが実際にキックされている場合、webpackをデバッグして実際に使用しているパスを確認する方法がありますか？

ありがとう！

reactjswebpackimportresolve
8
Richard Whitehouse

私が見逃していたのは、/ appの前のドットだけです！

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