Why would one prefer 'django-webpack-loader' over 'html-webpack-plugin' #209
Comments
|
I don't know what html-webpack-plugin is and don't remember using it. I wrote this to solve my own problem a few years ago. The core problem I was trying to solve was to make it easy for Django to figure out the names of bundles generated by webpack. If html-webpack-plugin solves your problem, then I don't see why you need to use django-webpack-loader at all. |
|
Thanks for the reply, I am inquiring about django-webpack-loader because I saw it mentioned in many tutorials and it is popular, so I was wondering if it has other features that I might need in the future, then I will be adopting it from the beginning. |
|
Html-webpack-plugin is a frontend solution to the problem, this is a backend solution. I'd say this plugin seems to be the easier/more manageable solution between the two, especially since there are going to be edge cases that you're not going to think of. |
|
I've created a Django + Vue CLI demo project following @ejez's approach: I'm not advocating against django-webpack-loader — just wanted to explore an alternative. |
|
It's pretty interesting indeed, I've been using both solutions, and didn't
find any reason to favor one on top of another so far.
|
|
I've got some updates:
|
|
@ejez, how would you use this approach on a MPA? |
might be of interest: |
|
@EugeneDae, thanks. I've read that :) However I'm not using vue, but a plain webpack config. |
I tried to see if I need to use 'django-webpack-loader' but still not convinced. Its objective is to allow use of the generated webpack bundles, but this can be achieved easily with 'html-webpack-plugin' which generates an html file with the bundle files injected in it, this html file then can be used as a django template.
The advantage of using 'html-webpack-plugin' becomes more obvious when using a pre-configured webpack ecosystem (like vue cli) where we get a ready made html file with all the needed head/body bundle tags (including prefetch/preload links ...) injected, without any need to manually select what to put in head/body.
Here is my setup (simplified):
base.html{% block html %} <!DOCTYPE html> <html {% block html_tag_attributes %}{% endblock %}> <head> {% block head %} <meta charset="utf-8"> {% endblock %} </head> <body {% block body_tag_attributes %}{% endblock %}> {% block body %} {% block content %}{% endblock %} {% endblock %} </body> </html> {% endblock %}index.html(template used by html-webpack-plugin to generatebundles/webpack/home_page.html):{% extends "base.html" %} {% load static %} {% block html %} <!DOCTYPE html> <html {% block html_tag_attributes %}{{ block.super }}{% endblock %}> <head> {% block head %}{{ block.super }}{% endblock %} </head> <body {% block body_tag_attributes %}{{ block.super }}{% endblock %}> {% block body %}{{ block.super }}{% endblock %} </body> </html> {% endblock %}home_page.html{% extends "bundles/webpack/home_page.html" %} {% block content %} Adding content here... {% endblock %}I appreciate if someone can tell if there is a scenario where we can do it only with
django-webpack-loaderNote: the links in the injected tags can be easily converted to django static tempate tag format, ie:
'bundles/js/main.js' ==> {% static 'bundles/js/main.js' %}I created a minimal basic plugin to do this: https://gitlab.com/noor-projects/django-static-webpack-plugin/blob/master/index.js
@owais
The text was updated successfully, but these errors were encountered: