エントリとコンテキスト

エントリオブジェクトは、Webpackがバンドルの構築を開始する場所です。コンテキストは、エントリファイルを含むディレクトリへの絶対パス文字列です。

context

文字列

エントリポイントとローダーを解決するためのベースディレクトリ（**絶対パス**）。

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};

デフォルトでは、Node.jsの現在の作業ディレクトリが使用されますが、設定で値を渡すことをお勧めします。これにより、設定がCWD（現在の作業ディレクトリ）に依存しなくなります。

entry

string [string] object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false })

アプリケーションのバンドルプロセスを開始するポイント。配列が渡された場合、すべてのアイテムが処理されます。

動的にロードされるモジュールは、エントリポイント**ではありません**。

考慮すべきルール：HTMLページごとに1つのエントリポイント。SPA：1つのエントリポイント、MPA：複数のエントリポイント。

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

名前付け

文字列または文字列の配列が渡された場合、チャンクの名前はmainになります。オブジェクトが渡された場合、各キーはチャンクの名前になり、値はチャンクのエントリポイントを示します。

エントリ記述子

オブジェクトが渡された場合、値は文字列、文字列の配列、または記述子になります。

module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // Create async chunks that are loaded on demand.
      layer: 'name of layer', // set the layer for an entry point
    },
  },
};

記述子構文を使用して、エントリポイントに追加のオプションを渡すことができます。

出力ファイル名

デフォルトでは、エントリチャンクの出力ファイル名はoutput.filenameから抽出されますが、特定のエントリに対してカスタム出力ファイル名を指定できます。

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: { import: './contact.js', filename: 'pages/[name].js' },
    about: { import: './about.js', filename: 'pages/[name].js' },
  },
};

ここでは、記述子構文を使用して、filenameオプションを特定のエントリポイントに渡しました。

依存関係

デフォルトでは、各エントリチャンクは、使用するすべてのモジュールを格納します。dependOnオプションを使用すると、1つのエントリチャンクから別のエントリチャンクにモジュールを共有できます。

module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

appチャンクには、react-vendorsが持つモジュールは含まれません。

dependOnオプションは、文字列の配列も受け付けます。

module.exports = {
  //...
  entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' },
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
    testapp: {
      import: './wwwroot/component/TestApp.tsx',
      dependOn: ['reactvendors', 'moment'],
    },
  },
};

また、配列を使用して、エントリごとに複数のファイルを指定することもできます。

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

動的エントリ

関数が渡された場合、すべてのmakeイベントで呼び出されます。

makeイベントは、Webpackの起動時と、ファイルの変更を監視している場合のすべての無効化時にトリガーされます。

module.exports = {
  //...
  entry: () => './demo',
};

または

module.exports = {
  //...
  entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};

たとえば、動的エントリを使用して、外部ソース（リモートサーバー、ファイルシステムコンテンツ、データベース）から実際のエントリを取得できます。

webpack.config.js

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // returns a promise that will be resolved with something like ['src/main-layout.js', 'src/admin-layout.js']
  },
};

output.libraryオプションと組み合わせる場合：配列が渡された場合、最後のアイテムのみがエクスポートされます。

ランタイムチャンク

これにより、エントリポイントのランタイムチャンクを設定し、Webpack `v5.43.0`以降、新しいランタイムチャンクを回避するために`false`に設定できます。

optimization.runtimeChunkを使用すると、指定されていないエントリポイントに対してグローバルに設定できます。

module.exports = {
  //...
  entry: {
    home: {
      import: './home.js',
      runtime: 'home-runtime',
    },
    about: {
      import: './about.js',
      runtime: false,
    },
  },
};