Webpack setup with Django

Question

I working on a Vue app in Django via django-webpack-loader, running locally I'm able to get it to work by using the following in my base.html file:

{% load render_bundle from webpack_loader %}
...
...
{% render_bundle 'app' %}

However, in production this doesn't work - I believe because the webpack production config uses the CommonChunksPlugin to split the bundles into app, manifest and vendor.

There isn't much documentation online for merging Webpack with Django - I'm wondering if there is a way to include all chunks in the Django template.

`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:09
@rykener `django-webpack-loader` is still used. Check their [changelog here](https://github.com/django-webpack/django-webpack-loader/blob/master/CHANGELOG.md). — Gonçalo Peres, Sep 01 '22 at 16:22

score 7 · Answer 1 · answered Apr 06 '18 at 19:13

The problem in the end was due to code splitting. In dev, a single JS file is created, but in the production config the Webpack CommonChunksPlugin was configured to split the app into 3 files (manifest, vendor and app).

This solution isn't ideal and might not scale well, but by placing a conditional tag in the Django template I was able to correctly reference the necessary files.

{% if STAGE or PRODUCTION %}
  {% render_bundle 'vendor' 'js' %}
  {% render_bundle 'manifest' 'js' %}
{% endif %}

{% render_bundle 'app' 'js' %}

score 1 · Answer 2 · answered Apr 06 '18 at 00:05

1

Did you edit settings.py to point to the bundle directory?

APP_DIR = os.path.join(BASE_DIR, 'app')
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/'
    }
}

STATICFILES_DIRS = (
    os.path.join(APP_DIR, 'assets'),
)

Then use HtmlWebpackPlugin to point to chunks? https://github.com/jantimon/html-webpack-plugin/blob/master/README.md#writing-your-own-templates

plugins: [
    new HtmlWebpackPlugin({
      template: 'static/app/index.html'
    }), 
]

answered Apr 06 '18 at 00:05

Leon Mak

455
5
8

I did look into this, however at the point where Django's collectstatic command adds hashes to the files, I would be unable to use Webpack to inject the correct files, which is where the django-webpack-loader comes in. – Toby Apr 06 '18 at 19:14

score 0 · Answer 3 · answered Sep 01 '22 at 16:17

According to django-webpack-loader README.md

Version 1.0 and up of django-webpack-loader also supports multiple Webpack configurations.

So one could use define 2 Webpack stats files in settings: one for normal, and one for stage / prod

WEBPACK_LOADER = {
    'STAGE_OR_PROD': {
        'BUNDLE_DIR_NAME': 'stage_or_prod_bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-stage-or-prod.json'),
    },
    'NORMAL': {
        'BUNDLE_DIR_NAME': 'normal_bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-normal.json'),
    }
}

and then one can use the config argument in the template tags to influence which stats file to load the bundles from

{% load render_bundle from webpack_loader %}

<html>
  <body>
    ....
    {% render_bundle 'main' 'js' 'STAGE_OR_PROD' %}
    {% render_bundle 'main' 'js' 'NORMAL' %}

Webpack setup with Django

3 Answers3