Точки входа

Как упоминалось в Начинать работу, существуют различные способы определения свойства 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? Передача массива путей к файлам свойству entry создаёт то, что известно как "многократный основной вход". Это полезно, когда вы хотите объединить несколько зависимых файлов и построить их зависимости в один "сборник".

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

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

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

webpack.config.js

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

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

"Масштабируемые конфигурации webpack" — это конфигурации, которые можно повторно использовать и комбинировать с другими частичными конфигурациями. Этот метод популярен для разделения задач по среде, целевому сборке и среде выполнения. Затем они объединяются с помощью специализированных инструментов, таких как webpack-merge.

Сценарии

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

Разделение входов приложения и поставщиков

В версии webpack < 4 было принято добавлять поставщиков в качестве отдельной точки входа для компиляции их в отдельный файл (в сочетании с CommonsChunkPlugin).

Это не рекомендуется в webpack 4. Вместо этого опция optimization.splitChunks заботится о разделении модулей поставщиков и приложения и создании отдельного файла. Не создавайте вход для поставщиков или другого контента, который не является отправной точкой выполнения.

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

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 для создания пакетов общей кода приложения между каждой страницей. Многостраничные приложения, которые многократно используют код/модули между точками входа, могут значительно выиграть от этих методов, поскольку увеличивается количество точек входа.

В качестве правила: Используйте ровно одну точку входа для каждого документа HTML.