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

Читать в полной версии →

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

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

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

1. Добавить зависимость, в данном случае Vue, в HTML-код страницы
2. Настроить externals, то есть указать глобальную переменную из скрипта CDN и строку, которая будет использоваться для импорта
3. Импортировать зависимость с помощью строки, которая указана в настройках 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». Эти курсы перевернут ваше представление о том, что такое код, данные и функции. Они базируются на легендарном курсе «Структура и интерпретация компьютерных программ (СИКП)». В этих курсах создаются свои собственные типы данных, из которых строятся другие типы, изучаются функции высшего порядка, каррирование, частичное применение и многое другое. Вы познакомитесь с отложенными вычислениями, мемоизацией и лямбда-исчислением.