入口#

• 類型： string | string[] | Record<string, string | string[] | EntryDescription> | Function
• 預設值：'./src/index.js'

entry 設定用於設定 Rspack 建置的入口模組。

單一入口#

如果您正在建置單頁應用程式或程式庫，通常只需要設定單一入口點。

要設定單一入口，只需將入口模組的路徑作為字串傳遞給 entry 設定即可。

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

上述寫法會自動將入口模組的名稱設定為 main，這等同於以下寫法

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

路徑類型#

入口模組的路徑可以是相對路徑或絕對路徑。

如果 entry 設定為相對路徑，Rspack 將使用 context 設定 設定的值作為基礎路徑，預設值為 Node.js 程序目前的工作目錄，即 process.cwd ()。

您也可以使用 Node.js 中的 path 模組來產生絕對路徑，並將其傳遞給 entry 設定

const path = require('path');

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

入口陣列#

在設定入口的值時，除了將其設定為 string 外，您還可以傳入 string[]，表示入口包含多個入口模組。

例如，以下範例會將 pre.js 和 post.js 建置到 page 的輸出中。

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

多個模組將按照陣列定義的順序依序執行，因此 pre.js 中的程式碼將在 post.js 中的程式碼之前執行。

多個入口#

如果需要一次建置多個入口，應將 entry 設定為物件，且物件的每個鍵都對應一個入口名稱。

例如，以下範例會將 page1 和 page2 建置為兩個入口

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'

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設定影響

• 如果 target 設定為 'web'、'webworker'、'electron-renderer' 或 'node-webkit'，則預設值為 'fetch'。
• 如果 target 設定為 'node'、'async-node'、'electron-main' 或 'electron-preload'，則預設值為 'async-node'。

EntryDescription.layer#

• 類型： string | null | undefined
• 預設值：undefined

此條目的層級，透過分割程式碼片段中的層級匹配，rules、stats 和 externals 中讓相應的配置生效。

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

動態條目#

如果傳入一個函式，則會在每次make事件時調用該函式。

請注意，當 webpack 啟動時以及監看檔案變更時的每次失效時，都會觸發 make 事件。

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

或

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

例如：您可以使用動態條目從外部來源（遠端伺服器、檔案系統內容或資料庫）取得實際條目。

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 選項結合使用時：如果傳入一個陣列，則只會匯出最後一個項目。