Django, webpack and NPM. Packaging seems to work, but can't access the code

Question

Related questions appear not to be applicable in my case. As I do not understand where the issues lies, perhaps I am just not finding the solution.

I have some experience with Django, but this is my first time working with webpack and NPM. My intended behavior is simple. I want to be able include the following JS code in my existing Django project and access/use scene.

import * as THREE from 'three';
const scene = new THREE.Scene(); 

I have never worked with package (file?) managers, but I recognize that the import statement requires some kind of framework, like node or npm. I found a guide that explained how I could integrate Django with Webpack so I could make use of npm. Detailed code is below, but in short:

I have a JavaScript file that contains the following code:

console.log("Before import..");
import * as THREE from 'three';
const scene = new THREE.Scene();
console.log("After import..");

This file is located within my django static folder. In the Django .html that I am accessing I have included the following code

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

Here 'DEFAULT' refers to the following in myProject\settings.py:

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

Note that I also have included webpack_loader in my installed apps (in settings.py)

Then, I collect staticfiles in Django, and I execute npm run build

As I am completely new to npm, I am not confident in my understanding of the output of npm run build, but it looks like everything is okay:

(env) mjpvanzuijlen@vmu059:/home/myProject$ npm run build
> user@1.0.0 build /home/myProject
> webpack

(node:1304427) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
assets by status 524 KiB [cached] 1 asset
orphan modules 1.12 MiB [orphan] 1 module
./static/js/index.js + 1 modules 1.12 MiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main-ee513f6a0474365bade3.js (524 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (524 KiB)
      main-ee513f6a0474365bade3.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.67.0 compiled with 4 warnings in 7781 ms

Next, I navigate to my website/index.html. In the JS console I see the expected console logs:

 Before import..                                                  main-9511e0984532502a4e7d.js:2
 After import..                                                   main-9511e0984532502a4e7d.js:2

However, if I try to access the scene const it returns a ReferenceError.

Upon expection of the loaded main-9511e0984532502a4e7d.js file, which I understand is the packed up single .js file that now should contain the code as import * as THREE from 'three'. Upon inspecting the code, I do indeed see the code for three.js in this file, but of course minified. For example, I can see

console.log("Before import.."),
new ms,
console.log("After import..")

where ms indeed appears to be the three.js scene class.

Now, I am not finding any errors. The code actually appears to be contained within the packaged up .js file. It's even accessible in my django template when I access it over the internet. However, I still can not actually access it. That is, I would want to be able to just called scene on the browser console.

Am I making a simple mistake? What is actually going wrong here and what can I do to solve it?