webpack-entry

webpack-entry

正如在入門中提到的，有多種方法能夠在 webpack 配置中定義 entry 屬性。
接下來，將展現配置entry 屬性的方法，並解釋爲何可能對您有用。

Single Entry(Shorthand) Syntax

Usage: entry: string | Array < string >

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

Object Syntax

Usage: entry: { [ entryChunkName : string ]: Array < string >}

webpack.config.js

module.export = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
}

對象語法雖然冗長，然而，這是在應用程序中定義條目的最可伸縮的方式。

多頁應用 Multi Page Application

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 在每一個頁面之間建立共享代碼包。在入口點之間重用大量代碼/模塊的多頁面應用程序能夠極大地受益於這些技術。