webpackがバンドルに含めるコードを解決する方法

Question

バンドルに含めるコードをwebpackがどのように選択するのか疑問に思っています。

完全な.jsファイルまたは必要なコードのみが含まれていますか？

外部ライブラリ（jQueryなど）を使用する場合。完全なバンドルまたは必要な機能だけを含んでいますか？

webpackはコードを最終バンドルに入れるべきですか？

ありがとうございました。

Answer 1

完全な.jsファイルまたは必要なコードのみが含まれていますか？

これは、サードパーティのコードをwebpackにバンドルするかどうかによって異なります。 jQueryなどの外部APIから静的アセットをロードするだけの場合、バンドルされていないため、Webpackはそれについて何も知らないでしょう。

たとえば、JqueryがWebpackにバンドルしているファイルの依存関係のチェーン内にある場合、他のモジュールによってインポートされたすべてのjQueryコードは、残りのモジュールと共にバンドルされます。 Webpack。 バンドル処理の結果は、依存する第三者モジュールを含むすべてのモジュールで構成される1つの大きなファイルです。

外部ライブラリ（jQueryなど）を使用する場合。完全なバンドルまたは必要な機能だけを含む が含まれていますか？依存関係のWebPACKのグラフをマッピングすることにより

のWebPACKで

モジュール/依存関係の解決は、非同期正しい順序で異なるモジュールをロードすることができます。内部的にWebpackには、異なるモジュール間の欲望グラフを把握するための独自のリゾルバがあります。

リゾルバはwebpackがrequire/import文ごとにバンドルに含める必要があるモジュールコードを見つけるのを助けます。 次に、Webpackがバンドルしているファイルのインポートによって参照されるパスのタイプに応じて、リゾルバが異なるアプローチをとることをドキュメントで説明します。

解決プロセスは非常に簡単ですし、要求の 3の間のタイプ区別：

• 絶対パス：必要（ "/ homeは/ ME /ファイル"）は、必要（ "C：\ホームページ\を（ "./ file"）
• 相対パス：require（ "../ src/file"）、require（ "./ file"）モジュールパス：
• require（ "module"）、require（ "module/lib" /ファイル "）

Webpackがモジュールを解決する方法の詳細については、thisを参照してください。