Точки входа

Как упоминалось в Начинающем руководстве, существует несколько способов определения свойства entry в вашей конфигурации webpack. Мы покажем вам способы конфигурации свойства entry, помимо объяснения, почему это может быть полезно для вас.

Синтаксис одиночного входа (сокращённый)

Использование: entry: string | [string]

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

Синтаксис одиночного входа для свойства entry является сокращением для:

webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

Мы также можем передать массив путей к файлам в свойство entry, что создаёт то, что известно как «множественный основной вход». Это полезно, когда вы хотите объединить несколько зависимых файлов и отобразить их зависимости в один «фрагмент».

webpack.config.js

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

Синтаксис одиночного входа — отличный выбор, когда вы хотите быстро настроить конфигурацию webpack для приложения или инструмента с одной точкой входа (например, библиотеки). Однако в этом синтаксисе не так много гибкости для расширения или масштабирования вашей конфигурации.

Синтаксис объекта

Использование: entry: { <entryChunkName> string | [string] } | {}

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

Синтаксис объекта более объёмный. Однако это самый масштабируемый способ определения входа/входов в вашем приложении.

Объект EntryDescription

Объект описания точки входа. Вы можете указать следующие свойства.

• dependOn: Точки входа, от которых зависит текущая точка входа. Они должны быть загружены перед загрузкой этой точки входа.

• filename: Указывает имя каждого выходного файла на диске.

• import: Модуль(и), который(ые) загружается(ются) при запуске.

• library: Укажите параметры библиотеки для создания библиотеки из текущей точки входа.

• runtime: Имя фрагмента выполнения. При установке создаётся новый фрагмент выполнения. Он может быть установлен на false, чтобы избежать создания нового фрагмента выполнения с версии webpack 5.43.0.

• publicPath: Укажите публичный URL-адрес выходных файлов этой точки входа, когда они ссылаются в браузере. Также см. output.publicPath.

webpack.config.js

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

runtime и dependOn не должны использоваться вместе в одной точке входа, поэтому следующая конфигурация некорректна и приведёт к ошибке:

webpack.config.js

module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

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

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

Также dependOn не должен быть циклическим, следующий пример также приведёт к ошибке:

module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

Сценарии

Ниже приведён список конфигураций входа и их примеров использования в реальных приложениях:

Отдельные входы приложения и поставщиков

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

Что это делает? Мы говорим webpack, что хотим 2 отдельных точки входа (как в примере выше).

Почему? Благодаря этому вы можете импортировать необходимые библиотеки или файлы, которые не изменяются (например, Bootstrap, jQuery, изображения и т. д.) в vendor.js, и они будут объединены в свой собственный фрагмент. Хэш содержимого остаётся неизменным, что позволяет браузеру кэшировать их отдельно, тем самым уменьшая время загрузки.

Многостраничное приложение

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

Что это делает? Мы говорим webpack, что хотим 3 отдельных графов зависимостей (как в примере выше).

Почему? В многостраничном приложении сервер будет загружать для вас новый документ HTML. Страница перезагружает этот новый документ, и активы перекачиваются. Однако это даёт нам уникальную возможность выполнять такие действия, как использование optimization.splitChunks для создания наборов общего кода приложения между каждой страницей. Многостраничные приложения, которые повторно используют много кода/модулей между точками входа, могут существенно выиграть от этих методов, поскольку количество точек входа увеличивается.