#12 — ProvidePlugin — плагин, подключающий модули самостоятельно
Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack 2.
Чем массивнее становится наше приложение, тем больше наши модули наполняются простынями импортируемых библиотек и других модулей
|
1 2 |
import React from 'react' import $ from 'jquery' |
К счастью, у Webpack есть замечательный инструмент — плагин ProvidePlugin, который анализирует наши исходники и автоматически включает нужные модули на основании используемых литералов.
Так, встретив в коде какого-либо модуля идентификатор “$” или “jQuery”, ProvidePlugin сам подключит jQuery, но только туда, где он действительно нужен. Разумеется, при этом у вас должен быть установлен сам jQuery и выполнены некоторые настройки.
Полезные ссылки
Плагин ProvidePlugin на практике
Установим jquery.
|
1 |
yarn add jquery |
webpack.config.js
|
1 2 3 4 5 6 |
plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ], |
В index.js напишем какой-либо код, который использует jquery. Например console.log. Напомню, что jquery может быть вызван при помощи объектов ДОЛЛАР или ДЖИКУЭРИ.
|
1 |
console.log($); console.log(jQuery); |
Запустим dev-server.
|
1 |
yarn run start |
Откроем браузер и заглянем в консоль.
Отлично, всё работает так, как мы и ожидали. Джикуэри выведен в консоль. При этом мы нигде явно его не подключали.
Сделаем коммит и пойдем дальше.
На этом подойдет к концу уже двенадцатый видеоурок курса по изучению Webpack 2.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!