django-webpack-loader

Read http://owaislone.org/blog/webpack-plus-reactjs-and-django/ for a detailed step by step guide on setting up webpack with django using this library.

Use webpack to generate your static bundles without django's staticfiles or opaque wrappers.

Django webpack loader consumes the output generated by webpack-bundle-tracker and lets you use the generated bundles in django.

Install

npm install --save-dev webpack-bundle-tracker

pip install django-webpack-loader

## Configuration
### Assumptions

Assuming BASE_DIR in settings refers to the root of your django app.

import sys
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

Assuming `assets/` is in `settings.STATICFILES_DIRS` like

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

Assuming your webpack config lives at `./assets/webpack.config.js` and looks like this ```javascript module.exports = { context: __dirname, entry: { app: './js/index' output: { path: require('path').resolve('./assets/bundles/'), filename: '[name]-[hash].js', },

plugins: [ new BundleTracker({filename: './assets/webpack-stats.json'}) ] }

<br>
### Default Configuration
```python
WEBPACK_LOADER = {
    'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
    'STATS_FILE': 'webpack-stats.json',
    'POLL_DELAY': 0.2,
    'IGNORE': ['.+\.hot-update.js', '.+\.map']
}

BUNDLE_DIR_NAME

WEBPACK_LOADER = {
	'BUNDLE_DIR_NAME': 'bundles/' # end with slash
}

BUNDLE_DIR_NAME refers to the dir in which webpack outputs the bundles. It should not be the full path. If ./assets it one of you static dirs and webpack generates the bundles in ./assets/output/bundles/, then BUNDLE_DIR_NAME should be output/bundles/.

If the bundle generates a file called main-cf4b5fab6e00a404e0c7.js and your STATIC_URL is /static/, then the <script> tag will look like this

<script type="text/javascript" src="/static/output/bundles/main-cf4b5fab6e00a404e0c7.js"/>

STATS_FILE

WEBPACK_LOADER = {
	'STATS_FILE': os.path.join(BASE_DIR, 'assets/webpack-stats.json')
}

STATS_FILE is the filesystem path to the file generated by webpack-bundle-tracker plugin. If you initialize webpack-bundle-tracker plugin like this

new BundleTracker({filename: './assets/webpack-stats.json'})

and your webpack config is located at /home/src/assets/webpack.config.js, then the value of STATS_FILE should be /home/src/assets/webpack-stats.json

IGNORE

IGNORE is a list of regular expressions. If a file generated by webpack matches one of the expressions, the file will not be included in the template.

POLL_INTERVAL

POLL_INTERVAL is the number of seconds webpack_loader should wait between polling the stats file. The stats file is polled every 200 miliseconds by default and any requests to are blocked while webpack compiles the bundles. You can reduce this if your bundles take shorter to compile.

NOTE: Stats file is not polled when in production (DEBUG=False).

Usage

Templates

{% load render_bundle from webpack_loader %}

{% render_bundle 'main' %}

render_bundle will render the proper <script> and <link> tags needed in your template.

How to use in Production

It is up to you. There are a few ways to handle this. I like to have slightly separate configs for production and local. I tell git to ignore my local stats + bundle file but track the ones for production. Before pushing out newer version to production, I generate a new bundle using production config and commit the new stats file and bundle. I store the stats file and bundles in a directory that is added to the STATICFILES_DIR. This gives me integration with collectstatic for free. The generated bundles are automatically collected to the target directory and synched to S3.

./assets/webpack_production.config.js

config = require('./webpack.config.js');

config.output.path = require('path').resolve('./assets/dist');

config.plugins = [
    new BundleTracker({filename: './assets/webpack-stats-prod.json'})
]

// override any other settings here like using Uglify or other things that make sense for production environments.

module.exports = config;

settings.py

if not DEBUG:
    WEBPACK_LOADER.update({
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'assets/webpack-stats-prod.json'
    })

You can also simply generate the bundles on the server before running collectstatic if that works for you.

---

Enjoy your webpack with django :)