Вход и контекст

Объект входа — это то, откуда webpack начинает сборку пакета. Контекст — это абсолютный путь к каталогу, содержащему файлы входа.

контекст

string

Базовый каталог, являющийся абсолютным путём, для разрешения точек входа и загрузчиков из конфигурации.

const path = require('path');

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

По умолчанию используется текущая рабочая директория Node.js, но рекомендуется указывать значение в конфигурации. Это делает конфигурацию независимой от текущей рабочей директории (CWD).

вход

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