Webpack not finding file

Question

I'm recently following a tutorial on using webpack with Django and for the life of me the local host just can't find my bundle file

This is what the console shows when I inspect on my local host:

GET http://127.0.0.1:8000/static/bundles/bundle.js net::ERR_ABORTED 404 (Not Found)

But I do have a directory called static in my project root directory, and a bundles directory inside, and a bundle.js file inside. I don't understand why the local host just couldn't find my file

This is part of my tree:

├── static
│   └── bundles
│       └── bundle.js
├── templates
│   ├── base.html
│   ├── components
│   │   ├── game
│   │   │   └── game.html
│   │   └── lobby
│   │       ├── LobbyBase.jsx
│   │       ├── index.jsx
│   │       └── lobby.html
│   ├── home.html
│   ├── login.html
│   └── register.html
├── webpack-stats.json
└── webpack.config.js

As you can see there's a static file, a bundle file inside, and the bundle.js inside. This is the Django setting code I have:

STATIC_URL = '/static/'

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    },
}

Any help will be appreciated! Thank you so much

EDIT: Follow up: Deleting STATIC_URL doesn't help either. Thought that might be causing problem but doesn't seem so

Answer 1

I still don't know why this would fix the problem, but here's what I did to fix it:

Add this to setting:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

and magically the localhost can find the file. If anyone can explain why this is happening that would be awesome, hopefully this could save someone else some time if they're encountering similar problems!