2

I have a project, I use both Django and Webpack for bundling and process assets. My goal is to make Webpack process all assets, e.g. optimize images. If image is used in js / css file there is no problem. Things are going complicated when I use img only in Django template.

Is there a way to 'inform' Webpack, that particular img is used, and update path for it in Django template after webpack process it?

Edit: Maybe I need to clarify how build flow works. I have project with multiple 'static' sites. I use Webpack to bundle assets for specific one (due too entrypoints). All assets goes to my dist folder from I can easy collect them using properly configured {% static %} template tag. But those I implicit import in Django template file must be a name from entrypoint in case of js/css which is ok with me, cuz it is just couple of them per site (of course would be nice if those names could be hashed and Django would know about that) the thing I need most is to process images, for now I just use mentioned CopyWebpackPlugin to copy them all to dist folder from my src.. which is not elegant at all. Why? Because if I use same e.g. image.png in css and html I end up with [hash].png and copied image.png.

I wonder is there a way to e.g. hash names of images on webpack side and somehow inform Django about that image.png is now [hash].png

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Andreew4x4
  • 469
  • 4
  • 18
  • Could you add your Webpack code section where you load in and export your js / css files. It seems that Webpack does not know of the images in html. With the code, it would be easier to help you. You might want to look at the `html-loader` library for Webpack too. – Frederic Perron Apr 25 '21 at 13:25
  • This was a nice question, also with bounty, it's a pity nobody posted a good answer. Maybe this is an answer for you: https://stackoverflow.com/a/45598569/842935 ? – dani herrera Apr 26 '21 at 07:22
  • 1
    @FrédéricPerron exactly Webpack doesn't know, that is my question how to inform it. Html loader, wont parse Django templates even with preprocessorss, i would have to add all django template includes as entrypoints which could be nightmare. The only one solution in my mind is that I should write my own plugin searching for all usage {% static 'urll' } in prooject then pass those urls to file_loader and create a map for django with new paths, then on Django side during build change those paths. – Andreew4x4 Apr 29 '21 at 08:37
  • @daniherrera Thanks! But I am already using it as workaround. And copying all assets then django know where to find those. But using that plugin i cant hash names for assets or process them e.g for image optimization. – Andreew4x4 Apr 29 '21 at 08:39
  • I understand. I'm also waiting for a clever solution :) – dani herrera Apr 29 '21 at 11:42
  • What about trying to create a custom template tag in django and when loading an optimized ressource, this tag refers to the static optimized file? Would that be a way that fits your needs? – Frederic Perron Apr 29 '21 at 13:37
  • But how to clean all unused css classes? (Like import tailwind or bootstrap and remove not used classes) – dani herrera Apr 29 '21 at 14:50
  • @FrédéricPerron thank you. I wrote Edit to clarify more how build process works. – Andreew4x4 Apr 30 '21 at 07:58

0 Answers0