6

I use both webpack and django. Now I move bundled assets to /static/ directory of django each time, so I'd like to make more effective process.
I read some articles and many people recommend to use django-webpack-loader, but I don't fully understand what it does.

I've already read the official documents below.
https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
https://406.ch/writing/our-approach-to-configuring-django-webpack-and-manifeststaticfilesstorage/

I think it's for collecting bundled assets located outside of django projects, but it seems almost same as creating a symbolic link from django project to dist/ directory in webpack.
Is there any other useful feature in django-webpack-loader?

lipsum
  • 919
  • 2
  • 13
  • 24
  • `django-webpack-loader` is no longer maintained. I've been working on a replacement for it that is starting to gain traction and I def recommend trying it out: https://github.com/shonin/django-manifest-loader – rykener Dec 31 '20 at 23:07

2 Answers2

5

It's a handy little tool. This gist of webpack loader is create a mechanism to link up to your latest bundle in an automated fashion.

A "render_bundle" template tag is provided that outputs link to load in either your latest JS or CSS bundle.

The tag is based from a hash of the bundle code (so this will change if your bundle changes) therefore browsers will always load in the most up-to-date version of your static assets. This cache-busting technique is useful when testing on mobile devices or situations where performing a 'hard' refresh of the page is not straightforward.

I believe this is achieved by the template tag referring to the output of BundleTracker, which outputs metadata about the status of your webpack bundle in webpack-stats.json.

https://www.npmjs.com/package/webpack-bundle-tracker

user368604
  • 166
  • 3
  • I still don't understand the benefit of using `django-webpack-loader`. When I'm developing, I always use Shift+Command+R to reload the page. This already guarantees that the browser takes the latest JS bundle that has been compiled. – M3RS Dec 25 '18 at 20:58
  • 1
    Hard refresh is not simple to do on mobile browsers, and often not known by end users. – user368604 Apr 21 '20 at 10:35
1

I think you might be missing that webpack will append a random hash code (so new builds bust caches). Without some special logic, django won't know how to account for the hash.

In my opinion all the other stuff the other answerer mentioned are sort of extra bonuses to make your life easier.

Maus
  • 1,791
  • 1
  • 17
  • 28