Почему не видит переменную в консоле?

Question

[john_ol]

Всем добрый вечер. Я новичок в JS. Пытаюсь сделать модальное окно на чистом JS.
Знаю, что можно сделать на jQuery. Но интересует динамическое наполнение контента в данном окне.
Без Webpack в консоле можно обратиться к константе const modal = $.modal() и ее методам open(), close()
А вот с Webpack почему то нет. Пишет modal is not defined.
Весь приложенный код в главном файле index.js webpacka.
https://jsfiddle.net/john_ol/y84937fn/1/
Благодарю за помощью Заранее спасибо!

Comments

[Михаил]

каждый файл это модуль, со своими переменными и функциями, если вы ничего не экспортируете/импортируете, ничего и не появится
вешать что-либо на window плохая идея, и нужна только в крайних случаях

[Just Me]

выложи код с webpack.config.js

[john_ol]

Just Me, https://jsfiddle.net/john_ol/qv1x3oc9/
Вот.

[john_ol]

Михаил,
Может, я недопонимаю что-то, но весь код во входной точке расположен webpack'a. Для теста. И все равно невозможно обратиться к данной переменной.

[Just Me]

john_ol,

если ты новичок в JS зачем тебе такие сложные конфигурации вебпака? сделай что-то проще

твой код не работает. Ты забыл добавить css

[dmitry-toster]

john_ol, по урокам Минина обучаетесь и даже элементарно код скопировать не можете? стыдоба..

[john_ol]

Just Me,
Добавил css
Сейчас работает.

если ты новичок в JS зачем тебе такие сложные конфигурации вебпака? сделай что-то проще

.
С конфигурацией webpack я сам разбирался и писал ее сам около месяца. Подбирал нужные лоадеры и модули. В данном конфиге мне все понятно.
Можете сейчас глянуть на jsFiddle, пожалуйста?

[john_ol]

john_ol, https://jsfiddle.net/john_ol/y84937fn/13/

[john_ol]

dmitry-toster,
Пытаюсь обучаться.

[Just Me]

john_ol, если ты весь этот код (кроме css) запихнул в index.js, то всё должно работать, но смысла в этом нет.

Смысл вебпака в сборке модулей, где объект модального окна лишь один из них

Кроме того, тут window.$ = $ ты делаешь объект модального окна глобальным и смысл вебпака опять теряется, так как он собирает инкапсулируемый в модулях код в один пакет

Найди простой пример с импортом-экспортом модулей вебпаком и изучи его, а для написания плагинов при использовании вебпака используется UMD шаблон

[john_ol]

Just Me, Благодарю. Буду разбираться.

Answer 1

[Aetae]

Очевидно потому что webpack пакует модули внутри себя, так чтобы как можно меньше "мусорить" в глобал. Если вам нужно для целей отладки пошарить что-то в глобальную область - делайте это явно, через window.modal = ....
В подакшн версии это уже, само собой, неприемлемо.

Answer 2

[bilasA]

Если ты работаешь c webpack, то стоит знать то что он работает с модулями, каждый файл - это модуль, значит следует делать import/export для того чтоб работало всё так как нужно. Скорей всего import/export где-то не сделан или сделан не так. Проверяй. По примеру что ты сбросил, то всё в одном файле, тоесть в одном модуле. Если этот файл подключен к. index.html, то видеть должно. Если файлов несколько , но import/export тут будут кстати иначе работать не будет.

Comments

[Aetae]

Если этот файл подключен к. index.html, то видеть должно.

Не, не должно же. Вебпак всё заворачивает в функции и самовызывает.