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

[@loicleray]

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

[@bugbytes3923]

Thanks man! Glad it was useful!

[@loicleray]

@@bugbytes3923 Been binging your vids since watching this one. Subbed and Kofi'd ya. It ain't much, but it's a little thanks.

[@bugbytes3923]

@@loicleray thanks a lot man. Really appreciate that!

[@adi2scoops]

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!

[@bugbytes3923]

Thank you! There's so much that can go into building a web-app, and optimizing for production is a big topic, for sure!

[@dheekshithmahalingam6734]

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

[@bugbytes3923]

Glad to hear that! :) Thanks for the nice comment and thanks for watching!

[@julius8183]

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

[@bugbytes3923]

Thanks a lot!

[@israasalameh6879]

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

[@bugbytes3923]

Thank you very much! Good luck with your project :)

[@israasalameh6879]

@@bugbytes3923 Hello, I want to ask about webpack-django-loader, is it the same as this ?

[@leboyoyo]

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

[@nicenaija9952]

Been wanting to learn this

[@bugbytes3923]

Cool!

[@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?

[@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?

[@jaradc2198]

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.

[@robertowork7311]

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

[@Schlumpfpirat]

How does django-compressor relate?

[@tobidegnon4409]

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

[@bugbytes3923]

It’s particularly useful if you’re including lots of third party packages (HTMX, Alpine, jQuery, Lodash etc - or indeed React and Vue) and/or you need to transpile TypeScript, JSX or SASS to normal JS/CSS. Webpack can help with this. One thing I wanna explore later is the ability to use React within a Django template (i.e without having a separate front end project). Webpack can help you do this too. Anyway, thanks for your interest!

[@tobidegnon4409]

​@@bugbytes3923 Interesting, thanks for sharing your knowledge.

[@repotranstech]

@@bugbytes3923 this could be very interesting, looking forward to it.

[@bugbytes3923]

@@repotranstech thanks !

[@keenwire8166]

@@bugbytes3923 thank you for yet another great initiative! On the TypeScript note (though this can pertain to JavaScript as well), would you bundle all the transpiled TS files into one JS bundle? Recently I've ended up transpiling TS files with a bash script per directory (separate for different templates) so local files have access to other scopes but not to everything. This becomes a bit hacky when you also want to include some utils that are useful for more than one directory... Curious what you think!

[@blabla-kk8bl]

Integrating vue with Django Templates can be good too.

[@bugbytes3923]

Yes. I'm going to do a video on this later on!

[@ranahussain8599]

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 './js/plugins/custom-tabs.js'; import './js/plugins/html5lightbox.js'; import './js/plugins/jquery.form.js'; import './js/plugins/bootstrap-datetimepicker.min.js'; import './js/plugins/bootstrap.min.js'; import './js/plugins/froogaloop2.min.js'; import './js/plugins/jquery.validate.min.js'; 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