入口与上下文

入口对象是 webpack 开始构建打包的起点。上下文是包含入口文件的目录的绝对字符串路径。

context

字符串

配置中解析入口点和加载器的**绝对路径**作为基础目录。

const path = require('path');

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

默认情况下，使用 Node.js 的当前工作目录，但建议在配置中传递一个值。这会使你的配置独立于 CWD (当前工作目录)。

---

entry

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

应用程序打包过程的起点。如果传入一个数组，则所有项都将被处理。

动态加载的模块**不是**入口点。

一个要考虑的规则：每个 HTML 页面一个入口点。SPA（单页应用）：一个入口点，MPA（多页应用）：多个入口点。

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

命名

如果传入字符串或字符串数组，则 chunk 会被命名为 `main`。如果传入一个对象，则每个键都是 chunk 的名称，值描述了该 chunk 的入口点。

入口描述符

如果传入一个对象，值可以是字符串、字符串数组或描述符

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

描述符语法可用于向入口点传递额外选项。

输出文件名

默认情况下，入口 chunk 的输出文件名是从 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` 选项传递给特定的入口点。

依赖

默认情况下，每个入口 chunk 都存储了它使用的所有模块。通过 `dependOn` 选项，你可以将模块从一个入口 chunk 共享到另一个入口 chunk。

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

`app` chunk 将不包含 `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 事件时被调用。

请注意，`make` 事件会在 webpack 启动时触发，并且在监视文件更改时，每次文件失效都会触发。

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 选项结合使用时：如果传入一个数组，则只导出最后一个项。

运行时 chunk

它允许为入口点设置运行时 chunk，并从 webpack `v5.43.0` 开始，可以将其设置为 `false` 以避免生成新的运行时 chunk。

optimization.runtimeChunk 允许为未指定的入口点全局设置它。

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