在 webpack 配置中有多種方式定義entry屬性。

單個入口語法

用法：entry: string|Array<string>

// webpack.config.js
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

// 等同於下面寫法
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

當傳入entry以陣列形式傳入多個值時，webpack將會建立多個主入口。

物件語法

分離應用程式（app）和第三方庫（vendor）入口。

用法：entry: {[entryChunkName: string]: string|Array<string>}

// webpack.config.js
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

定義入口的最可擴充套件的方式。這告訴我們 webpack 從app.js和vendors.js開始建立依賴圖(dependency graph)。這些依賴圖是彼此完全分離、互相獨立的（每個 bundle 中都有一個 webpack 引導(bootstrap)）。

多頁面應用程式

// webpack.config.js
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

webpack 需要 3 個獨立分離的依賴圖。在多頁應用中，（譯註：每當頁面跳轉時）伺服器將為你獲取一個新的 HTML 文件。頁面重新載入新文件，並且資源被重新下載。然而，這給了我們特殊的機會去做很多事：

• 使用CommonsChunkPlugin
  為每個頁面間的應用程式共享程式碼建立 bundle。由於入口起點增多，多頁應用能夠複用入口起點之間的大量程式碼/模組，從而可以極大地從這些技術中受益。