Webpackが 'jquery'や '@ angular/xxx'などのエントリモジュール名を解決する方法

Question

Webpackエントリポイント（https://webpack.js.org/concepts/entry-points/）のドキュメントでは、エントリ値がファイルを指している必要があります。

const config = { 
    entry: { 
    main: './path/to/my/entry/file.js' 
    } 
}; 

しかし、私が見てきた例（通常、ベンダー固有の出力を作成囲む）の多くで、私はモジュールのリストが代わりに与えられていることに気づきました。

var config = { 
    // ... 
    entry: { 
     vendors: ['@angular/core','react','jquery'] 
    } 
    // ... 
} 

はどのようにWebPACKのは、例えば「@角度/コア」、または「jQueryの」の文字列を取り、ディスク上のJavaScriptのソースファイルにそれらを解決していますか？私は何が欠けていますか？

Answer 1

デフォルトでは、webpackはNode.jsのモジュール解像度に従います。インポートが絶対パス（/で始まる）でも明示的に相対パス（./または../で始まる）でもない場合、モジュールとして解決されます。つまり、インポートはLoading from node_modules Foldersです。

例えば、jqueryをインポートした場合、npmからインストールされたモジュールを使用します（./node_modules/jqueryにあるはずです）。モジュールがそのディレクトリに見つからない場合、モジュールは親ディレクトリに移動し、node_modulesディレクトリをチェックします。モジュールが見つかるか、ファイルシステムのルートに達するまで続きます。

Webpackでは、resolve.modulesを設定することで、モジュールの検索場所を変更できます。このオプションを設定する場合は、必ず"node_modules"を含めるようにしてください。そうしないと、npmからインストールされたモジュールをインポートできなくなります。