[Django]-How to load webpack bundle which has content based hash filename as static file in Django?

The best solution would be to access the webpack configuration file and set the bundle filename to have a static filename. Hashnames based on content for static files are useful for browser caching. However if this is not needed your best bet is probably to eject your create-react-app and tweak the webpack config.

To do with create-react-app this is could be possible to fork the react-scripts module and make such an adjustment.

Another less robust way of doing this if you don’t want to touch the webpack configuration for whatever reason is to create a bash script.

This script goes in the same directory as your package.json and greps the filename of the bundles from the output of the npm run build command. Then copies the css and js bundles to the django static folder under respective css and js directories.

build-django-static.sh

#!/usr/bin/env bash
for bundle in $(npm run build | grep -o 'build\/static\/\S*')
do
  filename=$(basename "$bundle")
  extension="${filename##*.}"
  outputpath=../core/static/${extension}/bundle.${extension}
  cp $bundle $outputpath
  echo copied $bundle to $outputpath
done

Note – It is crucial to change the $outputpath variable to the correct path that points to your static django directory.

Then add a custom npm script to your package.json which calls this bash script.

"scripts": {
   ...
   "build-django-static": "bash ./build-django-static.sh"
   ...
}

Then call the npm script by running the following command from the same directory as your package.json:

npm run build-django-static