django-webpack-pages

Use webpack with your multi-page, multi-lingual django webapp.

This project is based on django-webpack-loader which handles the connection to webpack. Consider using webpack-critical-pages as well if you are interested in speedups.

Put the following in your settings file:

WEBPACK_PAGES = {
    "CRITICAL_CSS_ENABLED": True,
    "ROOT_PAGE_DIR": osp.join(BASE_DIR, "pages"),
    "STATICFILE_BUNDLES_BASE": "bundles/{locale}/",  # should end in /
}

STATICFILES_FINDERS = (
    "webpack_pages.pageassetfinder.PageAssetFinder",
    # ... and more of your choosing:
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

# configure the loaded page directories and add the WebpackExtension
TEMPLATES = [
    {
        "BACKEND": "django_jinja.backend.Jinja2",
        "DIRS": [osp.join(BASE_DIR, "templates"), osp.join(BASE_DIR, "pages")]
        + [osp.join(BASE_DIR, app, "pages") for app in GRAZBALL_APPS]
        + [osp.join(BASE_DIR, app, "components") for app in GRAZBALL_APPS],
        "APP_DIRS": True,
        "OPTIONS": {
            # ...
            "extensions": [
                # ...
                "webpack_pages.jinja2ext.WebpackExtension",
            ],
        }
    }
]

Using webpack_loader.contrib.pages you can register entrypoints for corresponding pages in templates.

At the top of your individual page, do:

{% extends "layout.jinja" %}
{% do register_entrypoint("myapp/dashboard") %}

In the layout's (base template's) head, place the following:

<!DOCTYPE html>
{% do register_entrypoint("main") %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
  ...
  {{ render_css() }}
</head>
<body>
  ...
  {{ render_js() }}
</body>

This will load the registered entrypoints in order (main, then myapp/dashboard) and automatically inject the webpack-generated css and js. It also supports critical css injection upon first request visits.