私の設定でエイリアスが正しく解決されないのはなぜですか？

Question

私は私のWebPACKの設定で、次のresolveのオプションがあります。

resolve: { 
    modules: ["./app/static/js/homepage/", "./app/static/js/dashboard/",], 
    extensions: [".js", ], 
    alias: { 
     "bootstrap": "../../bower_components/bootstrap/dist/js/bootstrap", 
     "lodash": "../../bower_components/lodash/lodash", 
    // ... 

をしかし、私はこのエラーを取得：

ERROR in ./app/static/js/dashboard/main.js 
Module not found: Error: Can't resolve 'underscore' in '/app/app/static/js/dashboard' 
@ ./app/static/js/dashboard/main.js 84:0-112:2 

それはすべてdefineに何が起こるの別名としてunderscoreを処理しないことを意味し私のプロジェクトでは。

Answer 1

あなたは相対パスにそれらをエイリアシングしていて、（../../で）2つのディレクトリを上がるので、あなたは./app/static/js/dashboard/main.jsでlodashをインポートするとき、それはあなたのbower_componentsと仮定すると、

./app/static/bower_components/lodash/lodash 

でモジュールを見つけようとします（それが推奨されたように）、あなたは4つのディレクトリまで移動して、別名を修正することができ、プロジェクトのトップレベルにあります。あなたがあるファイルでそれらをインポートする場合

alias: { 
    "bootstrap": "../../../../bower_components/bootstrap/dist/js/bootstrap", 
    "lodash": "../../../../bower_components/lodash/lodash", 
} 

注意、これはのみ動作します4つのレベルの深さ。それらを絶対パスに置き換えることはどこでもうまくいくでしょう。

また、bower_componentsをモジュールに追加すると、すべてのbower_componentディレクトリが検索されます。これは、バアをウェブパックに統合する一般的な方法です。これで、エイリアスを追加せずにimport _ from 'lodash/lodash'を使用することができます。しかし、まだエイリアスを使いたい場合は、次のようにしてください：

resolve: { 
    modules: ["bower_components"], 
    extensions: [".js"], 
    alias: { 
    "bootstrap": "bootstrap/dist/js/bootstrap", 
    "lodash": "lodash/lodash", 
    } 
}