進入點和內容

輸入物件是 webpack 開始建置套件的地方。context 是包含輸入檔案的目錄的絕對字串。

context

字串

基本目錄，絕對路徑，用於從組態中解析進入點和載入器。

const path = require('path');

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

預設使用 Node.js 的目前工作目錄，但建議在組態中傳遞一個值。這會讓你的組態獨立於 CWD（目前工作目錄）。

entry

字串 [字串] 物件 = { <金鑰> 字串 | [字串] | 物件 = { import 字串 | [字串], dependOn 字串 | [字串], filename 字串, layer 字串, runtime 字串 | false }} (function() => 字串 | [字串] | 物件 = { <金鑰> 字串 | [字串] } | 物件 = { import 字串 | [字串], dependOn 字串 | [字串], filename 字串, layer 字串, runtime 字串 | false })

開始應用程式綑綁程序的點或點。如果傳遞陣列，則會處理所有項目。

動態載入的模組不是進入點。

要考量的規則：每個 HTML 頁面一個進入點。SPA：一個進入點，MPA：多個進入點。

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

命名

如果傳遞字串或字串陣列，則區塊命名為 main。如果傳遞物件，則每個金鑰都是區塊的名稱，而值描述區塊的進入點。

進入點描述符

如果傳遞物件，則值可能是字串、字串陣列或描述符

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 中擷取，但你可以為特定進入點指定自訂輸出檔名

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

描述符語法用於此處，以將 filename 選項傳遞給特定進入點。

依賴項

預設情況下，每個進入區塊都會儲存它使用的所有模組。使用 dependOn 選項，您可以將模組從一個進入區塊分享到另一個區塊

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

app 區塊將不包含 react-vendors 所具有的模組。

dependOn 選項也可以接受字串陣列

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'],
    },
  },
};

此外，您可以使用陣列為每個進入指定多個檔案

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

動態進入

如果傳遞函式，則會在每次 make 事件中呼叫它。

請注意，當 webpack 啟動時，以及在 監控檔案變更 時的每次失效中，都會觸發 make 事件。

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

或

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

例如：您可以使用動態進入從外部來源（遠端伺服器、檔案系統內容或資料庫）取得實際進入。

webpack.config.js

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // returns a promise that will be resolved with something like ['src/main-layout.js', 'src/admin-layout.js']
  },
};

與 output.library 選項結合使用時：如果傳遞陣列，只會匯出最後一個項目。

執行時期區塊

它允許設定進入點的執行時期區塊，並將其設定為 false 以避免產生新的執行時期區塊，因為 webpack v5.43.0。

optimization.runtimeChunk 允許為未指定的進入點進行全域設定。

module.exports = {
  //...
  entry: {
    home: {
      import: './home.js',
      runtime: 'home-runtime',
    },
    about: {
      import: './about.js',
      runtime: false,
    },
  },
};