Webpack 入口和上下文

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

context

?string?

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

const path = require('path');

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

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

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)用程序打包過(guò)程的一個(gè)或多個(gè)起點(diǎn)。如果傳入數(shù)組，則會(huì)處理所有條目。

動(dòng)態(tài)加載的模塊 不是 入口起點(diǎn)。

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

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

Naming

如果傳入一個(gè)字符串或字符串?dāng)?shù)組，chunk 會(huì)被命名為 ?main?。如果傳入一個(gè)對(duì)象，則每個(gè)屬性的鍵(key)會(huì)是 chunk 的名稱，該屬性的值描述了 chunk 的入口點(diǎn)。

Entry descriptor

如果傳入一個(gè)對(duì)象，對(duì)象的屬性的值可以是一個(gè)字符串、字符串?dāng)?shù)組或者一個(gè)描述符(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
    },
  },
};

描述符語(yǔ)法可以用來(lái)傳入額外的選項(xiàng)給入口。

Output filename

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

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

描述符語(yǔ)法在這里被用來(lái)將 ?filename?—選項(xiàng)傳遞給指定的入口點(diǎn)。

Dependencies

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

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

?app? 這個(gè) chunk 就不會(huì)包含 ?react-vendors? 擁有的模塊了.

?dependOn? 選項(xiàng)的也可以為字符串?dāng)?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ù)組為每個(gè)入口指定多個(gè)文件：

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

Dynamic entry

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

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

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

或者

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

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

webpack.config.js

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

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