Why we need `django-webpack-looader` to serve Vue SPA application through django?

Question

I want to serve my Vue application (as SPA) through django, and I passed across this article. The author use django-webpack-loader to achieve this, but is not adding a simple TemplateView around dist/index.html will do the job:

url(r'^app/', TemplateView.as_view(template_name='index.html'), name='app'),  

also this require altering settings.by as follow:

'DIRS': [
    BASE_DIR + "/templates/",
    BASE_DIR + "/dist/",
] 

My question is what is the role of django-webpack-loader in the process if the app is already build using vue-cli?

Answer 1

After trying my approach without django-webpack-loader, I concluded that after each build, you have to do the following:

1. Put your entry-point (index.html), in a place that django can find it.
2. Put your assets (css, js, images) in the static folder.
3. Edit your index.html so it can correctly locate and load the scripts and css files, e.g:

<script src=/js/chunk-vendors.618e754e.js></script>
<script src=/js/app.bbfdaab6.js></script>

Should be:

<script src="{% static 'js/app.bbfdaab6.js' %}"></script>
<script src="{% static 'js/chunk-vendors.618e754e.js' %}"></script>

So django-webpack-loader should helps you with automating this task. without going through django staticfiles system.

Also I have read that django-webpack-loader can provide hot-code reloading during development but I did not try this out. Also I could not find information on how django-webpack-loader works really, so consider this answer incomplete.