入口和上下文

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

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

命名

如果传递的是字符串或字符串数组，则块名为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事件时被调用。

请注意，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 选项结合使用时：如果传递的是数组，则只导出最后一个项目。

运行时块

它允许为入口点设置运行时块，并将其设置为 false 以避免从 webpack v5.43.0 开始创建新的运行时块。

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

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