Django webpack loader: how to refer to static images compiled by webpack

Question

I'm setting up webpack for a a Django application, for which django-webpack-loader appears to be the obvious choice. I can compile my js and scss files just fine, but I've hit a wall when it comes to loading in the images.

My webpack.config.js file looks like this (I removed the scss, minifiers, babel, etc. for conciseness):

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  context: __dirname,
  entry: {
     main: ['@babel/polyfill', './ledger/static/ledger/js/index.js']
  },

  output: {
    path: path.resolve('./ledger/static/ledger/compiled_assets/'),
    filename: "[name]-[hash].js"
  },

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 loader: "file-loader",
                 options: {
                   outputPath: 'images'
                 }
               }
             ]
      }
    ]
  }
  mode: 'development'
}

As far as I've been led to believe, file-loader is what I need to load in the static image files.

When I run the build, the image file happily sits in my compiled_assets/images directory with its hash added.

The problem seems to be in how to refer to the file. While the js files load fine by using the

{% render_bundle 'main' 'js' 'DEFAULT' %}

tag, I can't get the image files to appear. The docs suggest that I need to use something like

{% load webpack_static from webpack_loader %}`
...
<img src="{% webpack_static 'images/logo.jpg' %}"/>

in my html file but no luck, it just tries to render the actual asset as

<img src="/static/logo.jpg">

---

I think the issue might be somewhere in my settings.py file. This is the relevant part of it:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")


WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'ledger/compiled_assets/', # 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']
    }
}

Am I missing something? Something along the lines of STATICFILES_DIRS, STATIC_FILES, or maybe some image related setting perhaps?

Answer 1

have the same issue. Looks like {% load webpack_static from webpack_loader %} ignores ebpack-stats.json where all images are in "assets" key:

"assets":{"images/logo-9af925ecf75862678220bae8cad387ad.png":{"name":"images/logo-9af925ecf75862678220bae8cad387ad.png","publicPath":"static/images/logo-9af925ecf75862678220bae8cad387ad.png"}...}

I'll try to manage it by merge Django Webpack Loader for css/js files and collectstatic for images