Указание глобальных функций в app.js вебпака npm

Подскажите, пожалуйста, как мне задать глобальные функции в файле app.js (в котором я импортирую все свои файлы), чтобы я один раз их вызвал там, например, функцию $ и больше нигде не инициализировал её? Сейчас во всех своих файлах .js я указываю раз за разом import $ from "jQuery"; и вот смотрю в файле app.js (который уже собранный и подключается на сайте), и вижу, что у меня там подключается девять раз одно и тоже:

/* harmony import */ var jQuery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jQuery */ "./node_modules/jQuery/dist/jquery.js");
/* harmony import */ var jQuery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jQuery__WEBPACK_IMPORTED_MODULE_0__);

наверно это как-то не правильно, но чтобы у меня в каждом файле работал $ приходится сейчас делать так.

Ещё можете, пожалуйста, подсказать, как понимать как инициализировать функции вебпака? Функция $ у меня инициализируется через импорт из модуля вебпака import $ from "jQuery";, но вот, например, для модуля fancybox создаётся константа const fancybox = require("@fancyapps/fancybox");. При этом, когда я пытался инициализировать их методами друг друга - не работали. Дайте совет, как понимать как инициализировать переменные вебпака. Я всегда, когда нахожу как устанавливается тот или иной модуль для вебпака, нигде рядом не нахожу пример инициализации функции, приходится копать ещё десятки сайтов, потому как они как правило разные. На различных сайтах даже есть ещё варианты, которые я не использовал, потому как у меня они не работали.