エントリポイント

はじめにで述べたように、webpack 設定の `entry` プロパティを定義するには複数の方法があります。 `entry` プロパティを設定**できる**方法に加えて、なぜそれが役立つのかを説明します。

単一エントリ（省略形）構文

使用方法: `entry: string | [string]`

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

`entry` プロパティの単一エントリ構文は、次の省略形です。

webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

また、ファイルパスの配列を `entry` プロパティに渡すこともできます。これは、**「マルチメインエントリ」**と呼ばれるものを作成します。これは、複数の依存ファイルをまとめて挿入し、それらの依存関係を 1 つの「チャンク」にグラフ化する場合に役立ちます。

webpack.config.js

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

単一エントリ構文は、1 つのエントリポイント（ライブラリなど）を持つアプリケーションまたはツールの webpack 設定をすばやく行いたい場合に最適な選択肢です。ただし、この構文では設定の拡張やスケーリングに柔軟性がありません。

オブジェクト構文

使用方法: `entry: { <entryChunkName> string | [string] } | {}`

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

オブジェクト構文はより冗長です。ただし、これはアプリケーションでエントリを定義する最もスケーラブルな方法です。

EntryDescription オブジェクト

エントリポイント記述のオブジェクト。次のプロパティを指定できます。

• `dependOn`: 現在のエントリポイントが依存するエントリポイント。これらのエントリポイントは、このエントリポイントがロードされる前にロードする必要があります。

• `filename`: ディスク上の各出力ファイルの名前を指定します。

• `import`: 起動時にロードされるモジュール。

• `library`: 現在のエントリからライブラリをバンドルするためのライブラリオプションを指定します。

• `runtime`: ランタイムチャンクの名前。設定すると、新しいランタイムチャンクが作成されます。 webpack 5.43.0 以降、新しいランタイムチャンクを回避するために `false` に設定できます。

• `publicPath`: ブラウザで参照されるときの、このエントリの出力ファイルのパブリック URL アドレスを指定します。また、output.publicPathも参照してください。

webpack.config.js

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

`runtime` と `dependOn` は単一のエントリで一緒に使用しないでください。したがって、次の設定は無効であり、エラーが発生します。

webpack.config.js

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

`runtime` は既存のエントリポイント名を指してはなりません。たとえば、以下の設定はエラーをスローします。

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

また、`dependOn` は循環的であってはなりません。次の例もエラーをスローします。

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

シナリオ

以下は、エントリ設定とその実際のユースケースのリストです。

アプリとベンダーのエントリを分離する

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

**これは何をするのですか？** 2 つの個別のエントリポイントが必要であることを webpack に伝えています（上記の例のように）。

**なぜ？** これにより、変更されない必要なライブラリまたはファイル（例：Bootstrap、jQuery、画像など）を `vendor.js` 内にインポートでき、それらは独自のチャンクにまとめてバンドルされます。コンテンツハッシュは同じままであるため、ブラウザはそれらを個別にキャッシュして、読み込み時間を短縮できます。

複数ページアプリケーション

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

**これは何をするのですか？** 3 つの個別の依存関係グラフが必要であることを webpack に伝えています（上記の例のように）。

**なぜ？** 複数ページアプリケーションでは、サーバーが新しい HTML ドキュメントを取得します。ページはこの新しいドキュメントをリロードし、アセットが再ダウンロードされます。ただし、これにより、`optimization.splitChunks`を使用して、各ページ間で共有アプリケーションコードのバンドルを作成するなど、独自の機会が得られます。エントリポイント間で多くのコード/モジュールを再利用する複数ページアプリケーションは、エントリポイントの数が増えるにつれて、これらの手法から大きなメリットを得ることができます。