CC 4.0 ライセンス

このセクションの内容は、以下のリンクの内容から派生したものであり、CC BY 4.0 ライセンスの対象となります。

以下の内容は、特に明記されていない限り、元のコンテンツに基づいて変更および削除された結果であると想定できます。

エントリ

  • 種類: string | string[] | Record<string, string | string[] | EntryDescription> | Function
  • デフォルト:'./src/index.js'

entry 設定は、Rspack ビルドのエントリモジュールを設定するために使用されます。

単一エントリ

シングルページアプリケーションまたはライブラリを構築する場合、通常は単一のエントリポイントを設定するだけで済みます。

単一エントリを設定するには、エントリモジュールへのパスを文字列として entry 設定に渡します。

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

上記の記述方法は、エントリモジュールの名前を自動的に main に設定します。これは以下の記述方法と同じです。

rspack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
  },
};

パス種類

エントリモジュールのパスは、相対パスまたは絶対パスにすることができます。

entry が相対パスとして設定されている場合、Rspack は context 設定 で設定された値をベースパスとして使用します。デフォルトでは、Node.js プロセスの現在の作業ディレクトリ、つまり process.cwd () です。

Node.js の path モジュール を使用して絶対パスを生成し、entry 設定に渡すこともできます。

rspack.config.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
};

エントリ配列

エントリの値を設定する場合、string に設定するだけでなく、string[] を渡すこともできます。これは、エントリに複数のエントリモジュールが含まれていることを意味します。

たとえば、以下の例では、pre.jspost.jspage の出力にビルドします。

rspack.config.js
module.exports = {
  entry: {
    page: ['./src/pre.js', './src/post.js'],
  },
};

複数のモジュールは、配列で定義された順序に従って順番に実行されるため、pre.js のコードは post.js のコードの前に実行されます。

複数エントリ

一度に複数のエントリをビルドする必要がある場合は、entry をオブジェクトに設定する必要があります。オブジェクトの各キーはエントリ名に対応します。

例えば、次の例では、page1page2 を2つのエントリとしてビルドします。

rspack.config.js
module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js',
  },
};

エントリ記述オブジェクト

entry をオブジェクトに設定すると、エントリの値を記述オブジェクトに設定できます。記述オブジェクトには、以下のプロパティを含めることができます。

EntryDescription.import

  • 型: string[] | string
  • デフォルト:'./src/index.js'

エントリモジュールのパス。

EntryDescription.runtime

  • 型: false | string
  • デフォルト:undefined

ランタイムチャンクの名前。 runtime が設定されている場合、新しいランタイムチャンクが作成されます。 false に設定して、新しいランタイムチャンクの作成を回避することもできます。

runtime プロパティは、ランタイムチャンクの名前を設定するために使用されます。例えば、main エントリチャンクの名前を 'foo' に設定する場合などです。

rspack.config.js
module.exports = {
  entry: {
    main: {
      import: './src/index.js',
      runtime: 'foo',
    },
  },
};

EntryDescription.chunkLoading

  • 型: false | string | 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import'
  • デフォルト:undefined

このエントリが他のチャンクをロードする方法。

EntryDescription.asyncChunks

  • 型: boolean
  • デフォルト:true

このエントリに対してオンデマンドの非同期チャンクを作成するかどうか。

EntryDescription.publicPath

  • 型: 'auto' | string | (pathData: PathData, assetInfo?: AssetInfo) => string
  • デフォルト:undefined

このエントリによって参照されるリソースのpublicPath。

EntryDescription.baseUri

  • 型: string
  • デフォルト:undefined

このエントリによって参照されるリソースのbaseURI。

EntryDescription.filename

  • 型: string
  • デフォルト:undefined

エントリチャンクのファイル名。

EntryDescription.library

  • 型: string | string[] | object
  • デフォルト:undefined

このエントリによって生成されるチャンクのライブラリとしての形式。詳細な設定については、output.library を参照してください。

EntryDescription.dependOn

  • 型: string[] | string
  • デフォルト:undefined

現在のエントリが依存するエントリ。 dependOn オプションを使用すると、あるエントリチャンクから別のエントリチャンクにモジュールを共有できます。

EntryDescription.wasmLoading

  • 型: 'fetch' | 'async-node'
  • デフォルト:undefined

WebAssemblyモジュールの読み込み方法を設定するオプション。デフォルトで含まれる方法は、'fetch'(Web/WebWorker)、'async-node'(Node.js)ですが、プラグインによって他の方法が追加される可能性があります。

デフォルト値は、異なるtargetの影響を受ける可能性があります。

  • ターゲットが'web''webworker''electron-renderer'、または'node-webkit'に設定されている場合、デフォルトは'fetch'です。
  • ターゲットが'node''async-node''electron-main'、または'electron-preload'に設定されている場合、デフォルトは'async-node'です。

EntryDescription.layer

  • 型: string | null | undefined
  • デフォルト:undefined

このエントリのレイヤー。分割チャンク、ルール、統計、および外部設定のレイヤー照合を通じて、対応する設定を有効にします。

警告

この設定は、experiments.layerstrue の場合にのみ有効になります。

rspack.config.js
module.exports = {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'layer-name',
    },
  },
  experiments: {
    layers: true,
  },
};

動的エントリ

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

make イベントは、Webpackの起動時と、ファイル変更の監視時のすべての無効化に対してトリガーされることに注意してください。

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

または

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

例: 外部ソース (リモートサーバー、ファイルシステムコンテンツ、またはデータベース) から実際のエントリを取得するために、動的エントリを使用できます。

rspack.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 オプションと組み合わせる場合: 配列が渡された場合、最後の項目のみがエクスポートされます。