Why does not see the variable in the console?

Question

JavaScript

Good evening everyone. I am new to JS. I'm trying to make a modal with pure JS.
I know what can be done with jQuery. But dynamic filling of content in the given window interests.
Without Webpack in the console, you can refer to the constant const modal = $.modal()and its methods open (), close ()
But with Webpack, for some reason, not. Writes modal is not defined.
All the attached code is in the main webpacka index.js file.
https://jsfiddle.net/john_ol/y84937fn/1/
Thank you for your help Thanks in advance!

Answer 1

Obviously, because webpack packs modules inside itself, so as to "garbage" as little as possible into the global. If you need to rummage something into the global scope for debugging purposes, do it explicitly via window.modal = ....
In the subaction version, this is, of course, unacceptable.

Answer 2

If you work with webpack, then you should know that it works with modules, each file is a module, so you should do import / export in order for everything to work as it should. Most likely import / export is not done somewhere or done wrong. Check it out. Following the example that you dropped, then everything is in one file, that is, in one module. If this file is connected to index.html, then it should see. If there are several files, but import / export will be here by the way, otherwise it will not work.