内部構造

このセクションでは webpack の内部構造について説明しており、プラグイン開発者にとって役立つ可能性があります。

バンドルとは、いくつかのファイルを入力として受け取り、他のファイルを出力する関数です。

しかし、入力と出力の間には、モジュール、エントリポイント、チャンク、チャンクグループ、その他多くの仲介部分が含まれています。

主要部分

プロジェクトで使用されるすべてのファイルはモジュールです

./index.js

import app from './app.js';

./app.js

export default 'the app';

モジュールは互いに使用することでグラフ (ModuleGraph) を形成します。

バンドルプロセス中に、モジュールはチャンクに結合されます。チャンクはチャンクグループに結合され、モジュールを介して相互接続されたグラフ (ChunkGraph) を形成します。エントリポイントを記述すると、内部的には1つのチャンクを持つチャンクグループが作成されます。

./webpack.config.js

module.exports = {
  entry: './index.js',
};

main という名前の1つのチャンクグループが作成されます (main はエントリポイントのデフォルト名です)。このチャンクグループには ./index.js モジュールが含まれています。パーサーが ./index.js 内のインポートを処理すると、新しいモジュールがこのチャンクに追加されます。

別の例

./webpack.config.js

module.exports = {
  entry: {
    home: './home.js',
    about: './about.js',
  },
};

home と about という名前の2つのチャンクグループが作成されます。それぞれにモジュールを含むチャンクがあります - home には ./home.js、about には ./about.js です。

チャンクグループには複数のチャンクが存在する場合があります。たとえば、SplitChunksPlugin はチャンクを1つ以上のチャンクに分割します。

チャンク

チャンクには2つの形式があります

• initial はエントリポイントのメインチャンクです。このチャンクには、エントリポイントに指定したすべてのモジュールとその依存関係が含まれています。
• non-initial は遅延ロードされる可能性のあるチャンクです。動的インポート または SplitChunksPlugin が使用されている場合に表示されることがあります。

各チャンクには対応する**アセット**があります。アセットは出力ファイル、つまりバンドルの結果です。

webpack.config.js

module.exports = {
  entry: './src/index.jsx',
};

./src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import('./app.jsx').then((App) => {
  ReactDOM.render(<App />, root);
});

名前が main の初期チャンクが作成されます。これは以下を含みます

• ./src/index.jsx
• react
• react-dom

そして ./app.jsx を除くすべての依存関係

このモジュールは動的にインポートされるため、./app.jsx の非初期チャンクが作成されます。

出力

• /dist/main.js - initial チャンク
• /dist/394.js - non-initial チャンク

デフォルトでは、non-initial チャンクには名前がないため、名前の代わりに一意の ID が使用されます。動的インポートを使用する場合、"マジック" コメントを使用してチャンク名を明示的に指定できます。

import(
  /* webpackChunkName: "app" */
  './app.jsx'
).then((App) => {
  ReactDOM.render(<App />, root);
});

出力

• /dist/main.js - initial チャンク
• /dist/app.js - non-initial チャンク

出力

出力ファイルの名前は、設定の2つのフィールドの影響を受けます

• output.filename - initial チャンクファイル用
• output.chunkFilename - non-initial チャンクファイル用
• 場合によっては、チャンクは initial と non-initial の両方で使用されます。そのような場合は output.filename が使用されます。

これらのフィールドでは、いくつかのプレースホルダーを使用できます。最も一般的なのは

• [id] - チャンク ID (例: [id].js -> 485.js)
• [name] - チャンク名 (例: [name].js -> app.js)。チャンクに名前がない場合は、ID が使用されます
• [contenthash] - 出力ファイルコンテンツの md4 ハッシュ (例: [contenthash].js -> 4ea6ff1de66c537eb9b2.js)