Благодаря webpack externals приложение, которое собирается с помощью webpack, может использовать зависимости, не включённые в бандл. Эти зависимости загружаются, например, с помощью ссылки на CDN в теге <script>, и становятся доступными глобально. Webpack externals позволяют использовать такие зависимости с помощью обычного импорта.
Как использовать webpack externals
Чтобы подключить, например, Vue через CDN в созданном с помощью webpack бандле, нужно выполнить следующие действия:
- Добавить зависимость, в данном случае Vue, в HTML-код страницы
- Настроить
externals, то есть указать глобальную переменную из скрипта CDN и строку, которая будет использоваться для импорта - Импортировать зависимость с помощью строки, которая указана в настройках
externals
Рассмотрим процесс пошагово.
Как добавить зависимость
В нашем примере нужно добавить в HTML страницы скрипт подключения:
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
Он добавляет Vue в объект window как window.Vue. Также доступ можно получить с помощью глобальной переменной Vue.
Читайте также Зачем нужно собирать фронтенд: подробный гайд
Как настроить externals
Это делается файле webpack.config.js:
module.exports = {
externals: {
vue: 'Vue'
}
};
Здесь мы указываем ключ vue и добавляем в его значение глобальную переменную Vue.
Как импортировать зависимость
Нужно указать импорт:
import Vue from 'vue';
Webpack externals фактически меняет значение from на определённое в webpack.config.js. То есть под капотом Vue импортируется из объекта window:
import Vue from window.Vue;
Вот и всё. Webpack externals пригодятся, если созданный с помощью webpack бандл запускается там, где уже есть внешние зависимости, например, как в ситуации с микрофронтендами. При правильном использовании webpack externals уменьшают время загрузки страницы и делают её более удобной как для разработчиков, так и для конечных пользователей.
Адаптированный перевод статьи What is Webpack Externals.
Прокачивайтесь с Хекслетом — пройдите трек для опытных разработчиков «СИКП на JS». Эти курсы перевернут ваше представление о том, что такое код, данные и функции. Они базируются на легендарном курсе «Структура и интерпретация компьютерных программ (СИКП)». В этих курсах создаются свои собственные типы данных, из которых строятся другие типы, изучаются функции высшего порядка, каррирование, частичное применение и многое другое. Вы познакомитесь с отложенными вычислениями, мемоизацией и лямбда-исчислением.
