Webpack のパッケージ化原理は何ですか?

Webpack のパッケージ化の原則は、ファイル間の依存関係を静的に分析し、指定されたルールに従ってこれらのモジュールから静的リソースを生成することです。Webpack がプログラムを処理するとき、依存関係グラフが再帰的に構築されます。アプリケーションに必要なモジュールを選択し、これらすべてのモジュールをバンドルにパッケージ化します。

は、ファイル間の依存関係に基づいてそれらを静的に分析し、指定されたルールに従ってこれらのモジュールから静的リソースを生成します。 be recursive アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

Webpack はモジュールをパッケージ化するための単なるメカニズムであり、依存モジュールをこれらのパッケージを表すことができる静的ファイルに変換するだけです。 commonjsやamdのようなモジュール仕様ではありません。 webpack はエントリ ファイルを識別します。コードをパッケージ化するためのモジュールの依存関係を特定します。

コードで commonjs、amd、または es6 import のいずれを使用するかについて。 webpack がそれを分析します。コードの依存関係を取得します。

webpack が行うことはコードの分析です。コードを変換し、コードをコンパイルし、コードを出力します。 Webpack 自体はノードのモジュールであるため、webpack.config.js は commonjs の形式で記述されます (ノード内のモジュール化は commonjs によって標準化されています)

Webpack の各モジュールには一意の ID があり、これは増加開始から始まります。 0から。パッケージ化されたbundle.js全体は、それ自体を実行する匿名関数です。パラメータは配列です。配列内の各項目は関数です。 functionの内容は各モジュールの内容であり、require順に並んでいます。

拡張情報:

webpack のコア概念:

1、エントリー

エントリーエントリ ポイントは、Webpack の内部依存関係グラフの構築を開始するためにどのモジュールを使用する必要があるかを示します。エントリ ポイントを入力すると、webpack はそのエントリ ポイントが (直接的および間接的に) どのモジュールとライブラリに依存しているかを調べます。次に、各依存関係が処理され、バンドルと呼ばれるファイルに出力されます。

2. Output

output 属性は、webpack に作成するバンドルの出力先と、これらのファイルの名前の付け方を指示します。デフォルト値は ./dist です。基本的に、アプリケーション構造全体は、指定された出力パスのフォルダーにコンパイルされます。

3. モジュール

モジュール、Webpack 内のすべてがモジュールであり、モジュールはファイルに対応します。 Webpack は、設定されたエントリから始まるすべての依存モジュールを再帰的に検索します。

4. チャンク

コード ブロック: チャンクは複数のモジュールで構成され、コードのマージと分割に使用されます。

5. ローダー

ローダーを使用すると、webpack が非 JavaScript ファイルを処理できるようになります (webpack 自体は JavaScript のみを理解します)。

Loader は、あらゆる種類のファイルを Webpack が処理できる有効なモジュールに変換し、Webpack のパッケージ化機能を使用してそれらを処理できます。

基本的に、webpack ローダーは、あらゆる種類のファイルを、アプリケーションの依存関係グラフ (最終的にはバンドル) によって直接参照できるモジュールに変換します。

以上がWebpack のパッケージ化原理は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。