Webpack

  • Bundles frontend assets (JS/CSS) under idk/assets
  • Outputs to idk/static/bundles/
  • Supports content‑hashing, CSS extraction, image/font handling, and Vue single‑file components

How Django loads bundles (webpack-loader)

  • webpack_loader is installed and configured in settings with WEBPACK_LOADER['DEFAULT'].
  • It points to a stats file (webpack-stats.json for dev, webpack-stats-prod.json for prod).
  • In Django templates, use the template tag to include built assets, for example:
  • {% render_bundle 'main' 'css' %} and {% render_bundle 'main' 'js' %}
  • The stats file is written by the custom RelativeBundleTrackerPlugin in the Webpack config, so Django always references the current filenames.

Common configuration (webpack.common.js)

Key points in webpack.common.js: - Entries: vuejs and main from idk/assets/js - Plugins: - CleanWebpackPlugin: cleans previous builds - ProvidePlugin: injects $, jQuery, bootstrap, and Vue - MiniCssExtractPlugin: extracts CSS with [name]-[contenthash].css - VueLoaderPlugin: enables .vue SFCs - DefinePlugin: injects process.env.SENTRY_DNS - Loaders: - CSS via vue-style-loader/css-loader - SCSS via MiniCssExtractPlugin.loader, css-loader, sass-loader - Images and fonts via file-loader with dev/production publicPath - .vue via vue-loader - Resolve aliases: map vue to the full build by default

Development build (webpack.dev.js)

  • Mode: development; devtool: inline-source-map
  • Output to idk/static/bundles/ with [name]-[hash].js
  • Writes webpack-stats.json via RelativeBundleTrackerPlugin
  • Used by Django through WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = webpack-stats.json

Production build (webpack.prod.js)

  • Mode: production; devtool: false
  • Output to idk/static/bundles/ with [name]-[chunkhash].js
  • Minification: Terser for JS, OptimizeCSSAssets for CSS (strip comments)
  • Writes webpack-stats-prod.json via RelativeBundleTrackerPlugin
  • In production settings, Django points WEBPACK_LOADER['DEFAULT']['STATS_FILE'] to this prod stats file
  • Uses Vue runtime build alias for smaller bundles