fixed webpack public path

requirements.txt

@@ -27,7 +27,7 @@ uritemplate==3.0.1
 beautifulsoup4==4.10.0
 microdata==0.7.1
 Jinja2==3.0.1
-django-webpack-loader==1.4.0
+django-webpack-loader==1.4.1
 django-js-reverse==0.9.1
 django-allauth==0.45.0
 recipe-scrapers==13.4.0

vue/package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-vue": "^7.10.0",
     "typescript": "~4.4.3",
     "vue-cli-plugin-i18n": "^2.1.1",
-    "webpack-bundle-tracker": "1.3.0",
+    "webpack-bundle-tracker": "1.4.0",
     "workbox-expiration": "^6.3.0",
     "workbox-navigation-preload": "^6.0.2",
     "workbox-precaching": "^6.3.0",

vue/src/apps/ModelListView/ModelListView.vue

@@ -140,7 +140,9 @@ export default {
   },
   computed: {
     headerComponent() {
-      return () => import(`@/components/${this.header_component_name}`)
+      // TODO this leads webpack to create one .js file for each component in this folder because at runtime any one of them could be requested
+      // TODO this is not necessarily bad but maybe there are better options to do this
+      return () => import(/* webpackChunkName: "header-component" */ `@/components/${this.header_component_name}`)
     }
   },
   mounted() {

vue/vue.config.js

@@ -48,7 +48,7 @@ module.exports = {
     filenameHashing: false,
     productionSourceMap: false,
     publicPath: process.env.NODE_ENV === 'production'
-        ? ''
+        ? '/static/vue'
         : 'http://localhost:8080/',
     outputDir: '../cookbook/static/vue/',
     runtimeCompiler: true,