0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Благодаря webpack externals приложение, которое собирается с помощью webpack, может использовать зависимости, не включённые в бандл. Эти зависимости загружаются, например, с помощью ссылки на CDN в теге <script>, и становятся доступными глобально. Webpack externals позволяют использовать такие зависимости с помощью обычного импорта.</p>
1
<p>Благодаря webpack externals приложение, которое собирается с помощью webpack, может использовать зависимости, не включённые в бандл. Эти зависимости загружаются, например, с помощью ссылки на CDN в теге <script>, и становятся доступными глобально. Webpack externals позволяют использовать такие зависимости с помощью обычного импорта.</p>
2
<h2>Содержание</h2>
2
<h2>Содержание</h2>
3
<ul><li><a>Как использовать webpack externals</a></li>
3
<ul><li><a>Как использовать webpack externals</a></li>
4
<li><a>Как настроить externals</a></li>
4
<li><a>Как настроить externals</a></li>
5
<li><a>Как импортировать зависимость</a></li>
5
<li><a>Как импортировать зависимость</a></li>
6
</ul><h2>Как использовать webpack externals</h2>
6
</ul><h2>Как использовать webpack externals</h2>
7
<p>Чтобы подключить, например, Vue через CDN в созданном с помощью webpack бандле, нужно выполнить следующие действия:</p>
7
<p>Чтобы подключить, например, Vue через CDN в созданном с помощью webpack бандле, нужно выполнить следующие действия:</p>
8
<ol><li>Добавить зависимость, в данном случае Vue, в HTML-код страницы</li>
8
<ol><li>Добавить зависимость, в данном случае Vue, в HTML-код страницы</li>
9
<li>Настроить externals, то есть указать глобальную переменную из скрипта CDN и строку, которая будет использоваться для импорта</li>
9
<li>Настроить externals, то есть указать глобальную переменную из скрипта CDN и строку, которая будет использоваться для импорта</li>
10
<li>Импортировать зависимость с помощью строки, которая указана в настройках externals</li>
10
<li>Импортировать зависимость с помощью строки, которая указана в настройках externals</li>
11
</ol><p>Рассмотрим процесс пошагово.</p>
11
</ol><p>Рассмотрим процесс пошагово.</p>
12
<h3>Как добавить зависимость</h3>
12
<h3>Как добавить зависимость</h3>
13
<p>В нашем примере нужно добавить в HTML страницы скрипт подключения:</p>
13
<p>В нашем примере нужно добавить в HTML страницы скрипт подключения:</p>
14
<p>Он добавляет Vue в объект window как window.Vue. Также доступ можно получить с помощью глобальной переменной Vue.</p>
14
<p>Он добавляет Vue в объект window как window.Vue. Также доступ можно получить с помощью глобальной переменной Vue.</p>
15
<h2>Как настроить externals</h2>
15
<h2>Как настроить externals</h2>
16
<p>Это делается файле webpack.config.js:</p>
16
<p>Это делается файле webpack.config.js:</p>
17
<p>Здесь мы указываем ключ vue и добавляем в его значение глобальную переменную Vue.</p>
17
<p>Здесь мы указываем ключ vue и добавляем в его значение глобальную переменную Vue.</p>
18
<h2>Как импортировать зависимость</h2>
18
<h2>Как импортировать зависимость</h2>
19
<p>Нужно указать импорт:</p>
19
<p>Нужно указать импорт:</p>
20
<p>Webpack externals фактически меняет значение from на определённое в webpack.config.js. То есть под капотом Vue импортируется из объекта window:</p>
20
<p>Webpack externals фактически меняет значение from на определённое в webpack.config.js. То есть под капотом Vue импортируется из объекта window:</p>
21
<p>Вот и всё. Webpack externals пригодятся, если созданный с помощью webpack бандл запускается там, где уже есть внешние зависимости, например, как в ситуации с микрофронтендами. При правильном использовании webpack externals уменьшают время загрузки страницы и делают её более удобной как для разработчиков, так и для конечных пользователей.</p>
21
<p>Вот и всё. Webpack externals пригодятся, если созданный с помощью webpack бандл запускается там, где уже есть внешние зависимости, например, как в ситуации с микрофронтендами. При правильном использовании webpack externals уменьшают время загрузки страницы и делают её более удобной как для разработчиков, так и для конечных пользователей.</p>
22
<p>Адаптированный перевод статьи<a>What is Webpack Externals</a>.</p>
22
<p>Адаптированный перевод статьи<a>What is Webpack Externals</a>.</p>