Что такое webpack externals и как их настроить

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

Содержание

• Как использовать webpack externals
• Как настроить externals
• Как импортировать зависимость

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

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

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

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

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React

от 6 744 ₽

Посмотреть →

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах

от 3 900 ₽

Посмотреть →

2 месяца·Для продвинутых

ООП на Javascript

Изучите архитектуру и принципы чистого кода на JS

от 3 900 ₽

Посмотреть →

2 месяца·Для продвинутых

Typescript

Изучите Typescript и получите навык снижать ошибки, упрощать отладку

от 3 900 ₽

Посмотреть →

1 месяц·С нуля

Основы JavaScript

Бесплатно

Посмотреть →

Каталог

Полный список доступных курсов по разным направлениям

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

В нашем примере нужно добавить в 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.