Django and Webpack - External Packages (HTMX and Alpine.js) CSS Loaders and Webpack Optimization

[@abhishekupadhyay6938]

Sir you are amazing. Your teaching style is very detailed & easy to understand. I have learned many new things from watching your videos. Thank you very much for sharing your knowledge.

[@bugbytes3923]

Thanks a lot for that nice comment, I'm glad the videos have helped!

[@BenMcNelly]

Timely episode, thanks!

[@bugbytes3923]

You’re welcome, hope it is useful!

[@robhafemeister3100]

Great video and perfect timing.

[@bugbytes3923]

Cheers Rob, hope it was useful!

[@robhafemeister3100]

@@bugbytes3923 Very useful, what would be the best way to add tailwind to webpack?

[@robhafemeister3100]

Currently I run npx tailwindcss -i ./src/tailwind.css -o ./assets/styles/styles.css --watch in another tab and then add styles.css to the assets/styles/index.css

[@bugbytes3923]

@@robhafemeister3100 I'm planning a dedicated video on this topic - setting up Tailwind, along with HTMX and Alpine, for a modern "low-JS" application, with Webpack. Should be in a few weeks hopefully!

[@robhafemeister3100]

@@bugbytes3923 That sounds great!

[@repotranstech]

Very helpful 👍 as always.

[@bugbytes3923]

Thanks!

[@jaradc2198]

If I were to put the before the closing tag instead of in the , do you recommend to keep it in the head tag or.. doesn't matter? I'm wondering about the use of 'defer' when the script tag is in the head as well?

[@Schlumpfpirat]

Love it! Can you make a video explaining how django-compressor integrates into all of this?

[@codevision8491]

Great sir😘

[@bugbytes3923]

Cheers!

[@ermalgashimramori]

Thank you!

[@daverobb2011]

Fantastic as always. I'm getting one Alpine warning in my dev tools that alpine is trying to load before the body is available. It suggests that I add defer to the script tag. Is there a reason why you did not use the defer tag in the script block?

[@bugbytes3923]

Thanks David! That is an oversight on my part. It's best for performance if you defer the script - and Alpine mention it in their installation docs: alpinejs.dev/essentials/installation

[@skyhappy]

You should check out vite, I use it over webpack since it's faster according to some stats I saw. Built on top of the fastest bundler, esbuild.

[@bugbytes3923]

Thanks for the tip, I'll look into it!

[@nicenaija9952]

Will this work with tailwindcss?

[@bugbytes3923]

There's some specific setup for Tailwind. I'll be demo'ing this in a future short video - the concepts are very similar though.

[@tobidegnon4409]

Have you tried any other js bundler outside of webpack? Something like parcel for exemple. In the js ecosystem webpack is reputed to be the most complex one and since as django devs we would like to avoid the most js complication as possible, I was wondering if something even simpler exists for our use case. But frankly your explanation are quite good and don't make this stuff seam's that complicated

[@bugbytes3923]

I've heard of Parcel and Rollup, but haven't really used them much yet. I'd like to try 'em out though. I think Webpack's still the main one, and it's the one I've used most. Webpack definitely is more complicated than it could be though. Might give the others a go in a future project!

[@AmoahDevLabs]

Very great tutorial. Any I'm getting an error in my terminal. It seems webpack is traversing through django/contrib/gis/ directory and throwing an error. This is the error "ERROR in /run/media/natus/alpha/Dev/Django/webpack/venv/lib/python3.10/site-packages/django/contrib/gis/templates/gis/admin/osm.js 2:86-87 [tsl] ERROR in /run/media/natus/alpha/Dev/Django/webpack/venv/lib/python3.10/site-packages/django/contrib/gis/templates/gis/admin/osm.js(2,87) TS1109: Expression expected. 377 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it." Please check this out.

[@bugbytes3923]

Thank you. Hard to tell exactly, but it looks like a TypeScript error. Are you using the "ts-loader"? When you define the "ts-loader", you should exclude all files from the Django project I think. More on excluding files here: webpack.js.org/guides/typescript/#basic-setup