進入點

如 開始使用 中所述，在 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 屬性，這會建立一個稱為「多主輸入」的內容。當你想要將多個相依檔案注入在一起，並將其相依性繪製成一個「區塊」時，這會很有用。

webpack.config.js

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

當你想要快速為應用程式或具有一個輸入點 (例如函式庫) 的工具設定 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',
  },
};

此功能的作用？我們告訴 webpack 我們想要 2 個獨立的輸入點（如上述範例）。

原因？這樣一來，您可以在 vendor.js 內匯入未修改的必要函式庫或檔案（例如 Bootstrap、jQuery、圖片等），而它們會被綑綁在一起成為自己的區塊。內容雜湊保持不變，這讓瀏覽器可以將它們分別快取，進而減少載入時間。

多頁面應用程式

webpack.config.js

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

此功能的作用？我們告訴 webpack 我們想要 3 個獨立的相依圖（如上述範例）。

原因？在多頁面應用程式中，伺服器會為您擷取新的 HTML 文件。此頁面會重新載入此新文件，並重新下載資源。不過，這讓我們有獨特的機會執行一些動作，例如使用 optimization.splitChunks 來建立各頁面之間共用應用程式程式碼的綑綁。在輸入點之間重複使用大量程式碼/模組的多頁面應用程式可以大幅受惠於這些技術，因為輸入點的數量會增加。