webpack loader

zodman · Dec 2, 2020 · ba1cb97 · ba1cb97
1 parent 6c104b2
commit ba1cb97
Show file tree

Hide file tree

Showing 11 changed files with 300 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -156,3 +156,4 @@ node_modules
 /core/static/dist
 django-sockpuppet
 .env/
+webpack-stats.json
diff --git a/app/settings.py b/app/settings.py
@@ -42,6 +42,7 @@
     'core',
     'pygments_renderer',
     'widget_tweaks',
+    'webpack_loader',
 ]
 
 MIDDLEWARE = [
@@ -172,6 +173,16 @@
         }
     }
 }
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
+        'BUNDLE_DIR_NAME': 'dist/js/',
+        'CACHE': not DEBUG
+    }
+}
+
+
 try:
     from .local_settings import *
 except ImportError:

diff --git a/app/urls.py b/app/urls.py
@@ -6,6 +6,7 @@
 import core.views.example
 import core.views.book_search
 import core.views.chat
+import core.views.calendar
 
 
 urlpatterns = [
@@ -15,4 +16,5 @@
          name='book_search'),
     path('example/', core.views.example.example, name='example'),
     path('chat/', core.views.chat.chat, name='chat'),
+    path('calendar/', core.views.calendar.calendar, name="calendar"),
 ] + staticfiles_urlpatterns()
diff --git a/core/javascript/example.js b/core/javascript/example.js
@@ -21,6 +21,7 @@ consumer.subscriptions.create('ChatChannel', {
     if (data.cableReady) CableReady.perform(data.operations)
   }
 })
+
 
 application.register("example", ExampleController)
 application.register("book-search", BookSearchController)

diff --git a/core/static/css/styles.css b/core/static/css/styles.css
@@ -56,7 +56,7 @@ flex-container { display: flex; }
 .mt-0 { margin-top: 0; }
 .mt-1 { margin-top: 1rem; }
 .mb-0 { margin-bottom: 0; }
-.mb-1 { margin-battam: 1rem; }
+.mb-1 { margin-bottom: 1rem; }
 .pl-1 { padding-left: 1rem; }
 .pr-2 { padding-right: 2rem; }
 .py--5 { padding-top: 0.5rem; padding-bottom: 0.5rem;}
@@ -65,3 +65,9 @@ flex-container { display: flex; }
 .border-right {
     border-right: 1px #AAA solid;
 }
+
+/*
+ * https://jsfiddle.net/vjs0cr9a/2
+ * */
+
+
diff --git a/core/templates/base.html b/core/templates/base.html
@@ -1,4 +1,4 @@
-{% load static pygmentize %}
+{% load static pygmentize webpack_loader %}
 <!DOCTYPE html>
 <html lang="en">
 
@@ -14,7 +14,10 @@
   <meta name="description" content="My description">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Expo</title>
+  {% render_bundle 'example' %}
+  {% comment %}
   <script src="{% static 'dist/js/example.js' %}"></script>
+  {% endcomment %} 
 </head>
 
 <body class="min-vh-100">

diff --git a/core/views/calendar.py b/core/views/calendar.py
@@ -0,0 +1,11 @@
+from django.views.generic.base import TemplateView
+from .mixins import ExampleMixin
+
+class CalendarView(ExampleMixin, TemplateView):
+    demo_template = '_calendar.html'
+    subtitle = 'Calendar'
+
+calendar = CalendarView.as_view()
+
+
+
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@rails/ujs": "^6.0.3-4",
     "lodash-es": "^4.17.15",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "webpack-bundle-tracker": "^1.0.0-alpha.1"
   }
 }
diff --git a/requirements.in b/requirements.in
@@ -5,6 +5,8 @@ django-pygments-renderer
 django-widget-tweaks
 django-redis
 
+https://github.com/gilmrjc/django-webpack-loader/archive/webpack-bundle-tracker-1.zip
+
 # deployment
 fabric
 patchwork

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,31 +1,37 @@
-const webpack = require('webpack');
-const glob = require('glob');
-
+const webpack = require("webpack");
+const glob = require("glob");
+var BundleTracker = require('webpack-bundle-tracker')
 
 let globOptions = {
-    ignore: ['node_modules/**', 'venv/**']
-}
+  ignore: ["node_modules/**", "venv/**"]
+};
 
-let entryFiles = glob.sync("**/javascript/*.js", globOptions)
+let entryFiles = glob.sync("**/javascript/*.js", globOptions);
 let entryObj = {};
-entryFiles.forEach(function(file){
-    if (file.includes('.')) {
-        let parts = file.split('/')
-        let path = parts.pop()
-        let fileName = path.split('.')[0];
-        entryObj[fileName] = `./${file}`;
-    }
+entryFiles.forEach(function(file) {
+  if (file.includes(".")) {
+    let parts = file.split("/");
+    let path = parts.pop();
+    let fileName = path.split(".")[0];
+    entryObj[fileName] = `./${file}`;
+  }
 });
 const config = {
-    mode: process.env.NODE_ENV,
-    entry: entryObj,
-    output: {
-        path: __dirname + '/core/static/dist/js',
-        filename: '[name].js'
-    },
-    optimization: {
-        minimize: true
-    }
-}
+  mode: process.env.NODE_ENV,
+  entry: entryObj,
+  output: {
+    path: __dirname + "/core/static/dist/js",
+    filename: "[name].[fullhash].js"
+  },
+  optimization: {
+    minimize: true
+  },
+  plugins: [
+    new BundleTracker({
+      path: __dirname,
+      filename: "./webpack-stats.json"
+    })
+  ]
+};
 //console.log(config);
-module.exports = config
+module.exports = config;
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ consumer.subscriptions.create('ChatChannel', { @@
         if (data.cableReady) CableReady.perform(data.operations)
       }
     })
     application.register("example", ExampleController)
     application.register("book-search", BookSearchController)
@@ Expand Down @@