Что такое webpack externals и как их настроить
2026-02-26 19:05 Diff
https://ru.hexlet.io/blog/posts/webpack-externals

Благодаря webpack externals приложение, которое собирается с помощью webpack, может использовать зависимости, не включённые в бандл. Эти зависимости загружаются, например, с помощью ссылки на CDN в теге <script>, и становятся доступными глобально. Webpack externals позволяют использовать такие зависимости с помощью обычного импорта.

Содержание

Как использовать webpack externals

Чтобы подключить, например, Vue через CDN в созданном с помощью webpack бандле, нужно выполнить следующие действия:

  1. Добавить зависимость, в данном случае Vue, в HTML-код страницы
  2. Настроить externals, то есть указать глобальную переменную из скрипта CDN и строку, которая будет использоваться для импорта
  3. Импортировать зависимость с помощью строки, которая указана в настройках externals

Рассмотрим процесс пошагово.

Как добавить зависимость

В нашем примере нужно добавить в HTML страницы скрипт подключения:

Он добавляет Vue в объект window как window.Vue. Также доступ можно получить с помощью глобальной переменной Vue.

Как настроить externals

Это делается файле webpack.config.js:

Здесь мы указываем ключ vue и добавляем в его значение глобальную переменную Vue.

Как импортировать зависимость

Нужно указать импорт:

Webpack externals фактически меняет значение from на определённое в webpack.config.js. То есть под капотом Vue импортируется из объекта window:

Вот и всё. Webpack externals пригодятся, если созданный с помощью webpack бандл запускается там, где уже есть внешние зависимости, например, как в ситуации с микрофронтендами. При правильном использовании webpack externals уменьшают время загрузки страницы и делают её более удобной как для разработчиков, так и для конечных пользователей.

Адаптированный перевод статьи What is Webpack Externals.