[WIP] Introduce webpack

.gitignore

@@ -79,3 +79,7 @@ package-lock.json
 .vscode/
 .history/
 *.code-workspace
+
+assets/webpack_bundles/
+node_modules/
+webpack-stats.json

aleksis/core/settings.py

@@ -115,6 +115,7 @@ INSTALLED_APPS = [
     "sass_processor",
     "django_any_js",
     "django_yarnpkg",
+    "webpack_loader",
     "django_tables2",
     "maintenance_mode",
     "menu_generator",
@@ -583,16 +584,22 @@ YARN_INSTALLED_APPS = [
     "luxon@^2.3.2",
     "@iconify/iconify@^2.2.1",
     "@iconify/json@^2.1.30",
-    "vue@^2.6.14",
-    "vuetify@^2.6.5",
-    "@mdi/font",
-    "vue-apollo@^3",
-    "apollo-boost",
-    "graphql",
 ]
 
 merge_app_settings("YARN_INSTALLED_APPS", YARN_INSTALLED_APPS, True)
 
+WEBPACK_LOADER = {
+    "DEFAULT": {
+      "CACHE": not DEBUG,
+      "STATS_FILE": os.path.join(BASE_DIR, "..", "webpack-stats.json"),
+      "POLL_INTERVAL": 0.1,
+      "IGNORE": [r".+\.hot-update.js", r".+\.map"],
+    }
+}
+STATICFILES_DIRS = (
+  os.path.join(BASE_DIR, "..", "assets"),
+)
+
 JS_URL = _settings.get("js_assets.url", STATIC_URL)
 JS_ROOT = _settings.get("js_assets.root", NODE_MODULES_ROOT + "/node_modules")
 

aleksis/core/templates/core/vue_base.html

 {# -*- engine:django -*- #}
 
 {% load i18n menu_generator static sass_tags any_js rules html_helpers %}
+{% load render_bundle from webpack_loader %}
 {% get_current_language as LANGUAGE_CODE %}
 {% get_available_languages as LANGUAGES %}
 
@@ -204,28 +205,13 @@
 </main>
 
 
-{% include_js "luxon" %}
-{#{% include_js "materialize" %}#}
-{% include_js "vue" %}
-{% include_js "vuetify" %}
-<script type="module" src="{% static 'apollo-boost/lib/bundle.esm.js' %}"></script>
-<script type="module" src="{% static 'vue-apollo/dist/vue-apollo.esm.js' %}"></script>
-<script type="module" src="{% static 'graphql-tag/lib/index.js' %}"></script>
-<script type="module" src="{% static 'graphql/index.mjs' %}"></script>
-{% include_js "sortablejs" %}
-{# Fixme: das muss weg ↓ #}
-{% include_js "jquery-sortablejs" %}
-{% absolute_url "graphql" as GRAPHQL_URL %}
-{{ GRAPHQL_URL|json_script:"graphql-url" }}
 {{ request.user.person.preferences.theme__design|json_script:"design-mode" }}
 {{ request.site.preferences.theme__primary|json_script:"primary-color" }}
 {{ request.site.preferences.theme__secondary|json_script:"secondary-color" }}
 {{ LANGUAGE_CODE|json_script:"current-language" }}
 {{ LANGUAGES|json_script:"language-info-list" }}
-{#{{ request.site.preferences.all|json_script:"preferences" }}#}
+{% render_bundle 'main' %}
 <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/vue/main_vue.js' %}"></script>
 {% block extra_body %}{% endblock %}
-<script type="module" src="{% static 'js/vue/app.js' %}"></script>
 </body>
 </html>

package.json

+{
+  "devDependencies": {
+    "webpack-bundle-tracker": "^1.6.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "dependencies": {
+    "@mdi/font": "^6.9.96",
+    "apollo-boost": "^0.4.9",
+    "graphql": "^15.8.0",
+    "vue": "^2.7.7",
+    "vue-apollo": "^3.1.0",
+    "vuetify": "^2.6.7"
+  }
+}

pyproject.toml

@@ -130,6 +130,7 @@ django-ical = "^1.8.3"
 django-iconify = "^0.3"
 customidenticon = "^0.1.5"
 graphene-django = "^2.15.0"
+django-webpack-loader = "^1.6.0"
 
 [tool.poetry.extras]
 ldap = ["django-auth-ldap"]

webpack.config.js

+const path = require('path');
+const webpack = require('webpack');
+const BundleTracker = require('webpack-bundle-tracker');
+
+module.exports = {
+  context: __dirname,
+  entry: './assets/js/index',
+  output: {
+    path: path.resolve('./assets/webpack_bundles/'),
+    filename: "[name]-[hash].js"
+  },
+  plugins: [
+    new BundleTracker({filename: './webpack-stats.json'})
+  ],
+}