Django and Webpack - Webpack Setup & Configuration, JavaScript Assets, Entry Points, Output Bundles

In this video, we'll learn how to set up Webpack in a Django project, and will go over the basics of Webpack, including:

1. How to set up NPM and Webpack
2. How to define an entry point for your assets (JS, CSS, files, fonts, etc)
3. How to specify and create an output bundle in your Django static directory from Webpack's build
4. How to run Webpack in watch mode

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:35 Setting up Django
04:05 Adding JavaScript file in static directory
06:25 Setting up NPM and Webpack
09:19 Webpack Concept - Entry Point
11:47 Webpack Concept - Output Bundles
16:32 Bundling multiple files into a single output with Webpack

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #python #webpack #frontend

[jaradc]

Am using django-pipeline and I hate it. I'm on the fence of learning Webpack or Parcel but the journey to learn how to create a workflow with Django is mystifying right now. If you know how to use Parcel with a Django project (or rollup, or anything all the glam right now), I would love to learn the workflow specifically - the tactical details of integration.

[ranahussain]

I bought a html template. It has Jquery and bootstrap but webpack can't resolve jquery. I am getting console error

Uncaught ReferenceError: $ is not defined
at 249 (bundle.js:2:41)
at __webpack_require__ (bundle.js:2:415098)
at bundle.js:2:415309
at bundle.js:2:458486
at bundle.js:2:458490
I tried every thing but it is not working. I don't want to install Jquery through npm I already have in file path. these are the plugin

import './js/jquery.js';
import './js/forms.js';
import './js/scripts.js';
import
import
import
import
import
import
import
import './js/plugins/moment.min.js';
import './js/plugins/slick.min.js';

then I am include this file into main entry point file.
I try this
// var $ = require("./js/jquery");
// window.jQuery = $;
// window.$ = $;

did not work at all. Any help. I will appreciate. Thanks

[dodokwak]

After creating a bundle for static content (incl bootstrap) I've noticed strange effect by going from one page to another. Something like blinking (choppy) as if there were some delay in request . It's noticeable and not very pleasant user experience. Could you give me some advise how to avoid it, please?

[leboyoyo]

awesome serie, do you think that would work with vite as well?

[dheekshithmahalingam]

Dude thanks a lot for this video from my heart! This video is a life saver for me!❤✨

[loicleray]

Dude. This video is gold. Much appreciated. The little summary at the end was mint too. Thank you!

[adiscoops]

Love your videos, I’m new to programming and they’ve helped me so much through my journey. It does seem like the development of the app is the easy bit and the deployment of that app into production is a whole new learning curve!

[tobidegnon]

Hum, I never thought of using a bundler with pure SSR Django without involving a js framework like vuejs or react, wondering how this can be useful, seems like an interesting topic 🤔. I'm here for it

[chaselamkin]

what is the best practice for when you have a very large django project? For example I have many different apps that present different views based on what type of user is authenticated. Should I keep the css and js all inside one assets folder then create multiple bundles that go to the different apps. Is it even possible to create multiple entrypoints that output to different files?

[israasalameh]

it's a wonderful explanation, I have use it in my djangocms-project. because I have many css and js files.

[robertowork]

Hello, webpack is used to have react / vue with django without the need to use rest api?

[julius]

Great video. Very well explained! Exactly what I was looking for.

[blabla-kkbl]

Integrating vue with Django Templates can be good too.