入口對象是用于 webpack 查找開始構(gòu)建 bundle 的地方。上下文是入口文件所處的目錄的絕對路徑的字符串。

context

?string?

基礎(chǔ)目錄，絕對路徑，用于從配置中解析入口點(entry point)和 加載器(loader)。

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};

默認使用 Node.js 進程的當前工作目錄，但是推薦在配置中傳入一個值。這使得你的配置獨立于 CWD(current working directory, 當前工作目錄)。

entry

?string? ?[string]? ?object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string })?

開始應(yīng)用程序打包過程的一個或多個起點。如果傳入數(shù)組，則會處理所有條目。

動態(tài)加載的模塊 不是 入口起點。

一個需要考慮的規(guī)則：每個 HTML 頁面都有一個入口起點。單頁應(yīng)用(SPA)：一個入口起點，多頁應(yīng)用(MPA)：多個入口起點。

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },
};

Naming

如果傳入一個字符串或字符串數(shù)組，chunk 會被命名為 ?main?。如果傳入一個對象，則每個屬性的鍵(key)會是 chunk 的名稱，該屬性的值描述了 chunk 的入口點。

Entry descriptor

如果傳入一個對象，對象的屬性的值可以是一個字符串、字符串數(shù)組或者一個描述符(descriptor):

module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // Create async chunks that are loaded on demand.
      layer: 'name of layer', // set the layer for an entry point
    },
  },
};

描述符語法可以用來傳入額外的選項給入口。

Output filename

默認情況下，入口 chunk 的輸出文件名是從 ?output.filename? 中提取出來的，但你可以為特定的入口指定一個自定義的輸出文件名。

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: { import: './contact.js', filename: 'pages/[name][ext]' },
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

描述符語法在這里被用來將 ?filename?—選項傳遞給指定的入口點。

Dependencies

默認情況下，每個入口 chunk 保存了全部其用的模塊(modules)。使用 ?dependOn? 選項你可以與另一個入口 chunk 共享模塊:

module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

?app? 這個 chunk 就不會包含 ?react-vendors? 擁有的模塊了.

?dependOn? 選項的也可以為字符串數(shù)組：

module.exports = {
  //...
  entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' },
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
    testapp: {
      import: './wwwroot/component/TestApp.tsx',
      dependOn: ['reactvendors', 'moment'],
    },
  },
};

此外，你還可以使用數(shù)組為每個入口指定多個文件：

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

Dynamic entry

如果傳入一個函數(shù)，那么它將會在每次 make 事件中被調(diào)用。

要注意的是，make 事件在 webpack 啟動和每當 監(jiān)聽文件變化 時都會觸發(fā)。

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

或者

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

例如，你可以使用動態(tài)入口來從外部來源（遠程服務(wù)器，文件系統(tǒng)內(nèi)容或者數(shù)據(jù)庫）獲取真正的入口：

webpack.config.js

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // 返回一個會被用像 ['src/main-layout.js', 'src/admin-layout.js'] 的東西 resolve 的 promise
  },
};

當和 ?output.library? 選項結(jié)合：如果傳入的是一個數(shù)組，只有數(shù)組的最后一個條目會被導(dǎo)出。