# django-webpack-loader
[](https://gitter.im/owais/django-webpack-loader?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://travis-ci.org/owais/django-webpack-loader)
[](https://coveralls.io/github/owais/django-webpack-loader?branch=master)
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](https://github.com/owais/webpack-bundle-tracker) and lets you use the generated bundles in django.
A [changelog](CHANGELOG.md) is also available.
## Maintainers
In order to overcome the lack of support for Markdown on PyPi, building this package can use [pandoc](http://pandoc.org/installing.html) along with [pypandoc](https://pypi.python.org/pypi/pypandoc) to convert the README.md into a Restructured Text format compatible with PyPI. This requires installing `pandoc` for your operating system (installation instructions on the pandoc site), and `pypandoc` which will be installed if you:
pip install -r requirements-dev.txt
before uploading to PyPI.
If pandoc or pypandoc fails, the README.md file will be uploaded as it was before this enhancement.
## Compatibility
Test cases cover Django>=1.6 on Python 2.7 and Python>=3.4. 100% code coverage is the target so we can be sure everything works anytime. It should probably work on older version of django as well but the package does not ship any test cases for them.
## Install
```bash
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.
```python
import sys
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
```
Assuming `assets/` is in `settings.STATICFILES_DIRS` like
```python
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)
```
Assuming your webpack config lives at `./webpack.config.js` and looks like this
```javascript
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/webpack_bundles/'),
filename: "[name]-[hash].js"
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'})
]
}
```
### Default Configuration
```python
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': ['.+\.hot-update.js', '.+\.map']
}
}
```
#### CACHE
```python
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG
}
}
```
When `CACHE` is set to True, webpack-loader will read the stats file only once and cache the result. This means web workers need to be restarted in order to pick up any changes made to the stats files.
#### BUNDLE_DIR_NAME
```python
WEBPACK_LOADER = {
'DEFAULT': {
'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` is one of your 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 `',
'']
```
## 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.
`./webpack_production.config.js`
```javascript
var config = require('./webpack.config.js');
var BundleTracker = require('webpack-bundle-tracker');
config.output.path = require('path').resolve('./assets/dist');
config.plugins = [
new BundleTracker({filename: './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`
```python
if not DEBUG:
WEBPACK_LOADER.update({
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json')
})
```
You can also simply generate the bundles on the server before running collectstatic if that works for you.
## Extra
### Jinja2 Configuration
If you need to output your assets in a jinja template we provide a Jinja2 extension that's compatible with the [Django Jinja](https://github.com/niwinz/django-jinja) module and Django 1.8.
To install the extension add it to the django_jinja `TEMPLATES` configuration in the `["OPTIONS"]["extension"]` list.
```python
TEMPLATES = [
{
"BACKEND": "django_jinja.backend.Jinja2",
"OPTIONS": {
"extensions": [
"django_jinja.builtins.extensions.DjangoFiltersExtension",
"webpack_loader.contrib.jinja2ext.WebpackExtension",
],
}
}
]
```
Then in your base jinja template:
```HTML
{{ render_bundle('main') }}
```
--------------------
Enjoy your webpack with django :)