Confident Asset Deployments with Webpack & Django

Confident Asset Deployments with Webpack & Django

Presented at Djangocon US 2016 on Tuesday, July 19th 2016.

9276306717c4c0abde5f3dc85a3a68c0?s=128

Scott Burns

July 19, 2016
Tweet

Transcript

  1. 20.

    $ npm install -s -g \ webpack \ webpack-bundle-tracker Confident

    Asset Deployments @scottsburns INSTALLATION
  2. 21.

    WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns var path = require("path") var

    webpack = require('webpack') var BundleTracker = require('webpack-bundle-tracker') module.exports = { entry: { app: ’./static/index.js’ }, output: { path: path.resolve('./static/bundles/'), filename: "[name]-[hash].js", },...
  3. 22.

    WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns ... plugins: [ new BundleTracker(

    {filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }
  4. 24.

    { “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/

    app-1234567890.js”} ] } } Confident Asset Deployments @scottsburns WEBPACK-STATS.JSON
  5. 26.

    app/ ├─ manage.py ├─ webpack.config.js ├─ webpack-stats.json ├─ static │

    ├─ index.js │ └─ bundles/ # git ignore │ └─ app-1234567890.js └─ app/ └─ urls.py, app.wsgi, etc… Confident Asset Deployments @scottsburns STRUCTURE
  6. 27.

    <head> ... </head> <body> <div id="root">...</div> <script src=“{% static ‘bundles/app-1234567890.js’

    %}” type=“text/javascript” charset=“utf-8”> </body> Confident Asset Deployments @scottsburns INDEX.HTML
  7. 31.

    ... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Confident

    Asset Deployments @scottsburns SETTINGS.PY
  8. 32.

    {% load render_bundle from webpack_loader %} <head> ... </head> <body>

    <div id="root">...</div> {% render_bundle ‘main' %} </body> Confident Asset Deployments @scottsburns INDEX.HTML