Remove Code Splitting section from README, do example instead

Author: fjsj

README.md

@@ -5,7 +5,7 @@
 ![pyversions](https://img.shields.io/pypi/pyversions/django-webpack-loader)
 ![djversions](https://img.shields.io/pypi/djversions/django-webpack-loader)
 
-Integrate Webpack bundles in Django templates by using a simple templatetag:
+Integrate Webpack bundles in Django templates by using a simple template tag:
 
 ```HTML+django
 {% load render_bundle from webpack_loader %}
@@ -17,14 +17,14 @@ Integrate Webpack bundles in Django templates by using a simple templatetag:
 </html>
 ```
 
-Behind the scenes, Django Webpack Loader consumes the **stats file** output generated by [webpack-bundle-tracker](https://github.com/django-webpack/webpack-bundle-tracker) and lets you use the generated bundles in Django.
+Behind the scenes, Django Webpack Loader consumes a **stats file** generated by [webpack-bundle-tracker](https://github.com/django-webpack/webpack-bundle-tracker) and lets you use the generated bundles in Django.
 
 A [changelog](CHANGELOG.md) is available.
 
 ## Compatibility
 
-Generally, Python and Django LTS releases will be supported until EOL. Check `tests/tox.ini` for details.  
-Versions not listed in `tests/tox.ini` may still work, but maintainers will not test them, nor support them.  
+Generally, Python, Django, and Node LTS releases will be supported until EOL. Check `tests/tox.ini` for details.  
+Versions not listed in `tests/tox.ini` may still work, but maintainers will not test them, nor solve issues with them.  
 Examples below are in Webpack 5.
 
 ## Install
@@ -52,7 +52,7 @@ module.exports = {
   context: __dirname,
   entry: "./assets/js/index",
   output: {
-    path: path.resolve("./assets/webpack_bundles/"),
+    path: path.resolve(__dirname, "assets/bundles/"),
     filename: "[name]-[contenthash].js",
   },
   plugins: [
@@ -115,7 +115,7 @@ In development, we can simply do:
 
 ```bash
 # in one shell
-npx webpack --config webpack.config.js --watch
+npx webpack --mode=development --watch
 
 # in another shell
 python manage.py runserver
@@ -125,7 +125,7 @@ Check [the full example for development here](https://github.com/django-webpack/
 
 Aditionally, hot reload is available through a specific config. Check [this section](#hot-reload).
 
-> ⚠️ For compiling the frontend assets in production, check [this section](#using-in-production).
+> ⚠️ For compiling and serving the frontend assets in production, check [this section](#using-in-production).
 
 ## Rendering
 
@@ -186,7 +186,11 @@ However, production usage for this package is **fairly flexible**, as the entire
 
 ### Hot reload
 
-In case you wish to enable hot reload for your project, please check out [this example](https://github.com/django-webpack/django-webpack-loader/tree/master/examples/hot-reload), in particular how [webpack.config.js](https://github.com/django-webpack/django-webpack-loader/blob/master/examples/hot-reload/webpack.config.js) is configured.
+[Hot reload (Hot Module Replacement)](https://webpack.js.org/guides/hot-module-replacement/) is critical for a improving the development workflow. In case you wish to enable for your project, please check out [this example](https://github.com/django-webpack/django-webpack-loader/tree/master/examples/hot-reload), in particular how [webpack.config.js](https://github.com/django-webpack/django-webpack-loader/blob/master/examples/hot-reload/webpack.config.js) is configured. The key is to set the `devServer`.
+
+### Dynamic Imports
+
+In case you wish to use [Dynamic Imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports), please check out [this example](https://github.com/django-webpack/django-webpack-loader/tree/master/examples/dynamic-imports), in particular how [webpack.config.js](https://github.com/django-webpack/django-webpack-loader/blob/master/examples/dynamic-imports/webpack.config.js) is configured. The key is to set the `publicPath`.
 
 ### Extra `WEBPACK_LOADER` settings in Django
 
@@ -372,68 +376,6 @@ CKEDITOR.config.contentsCss = '{{ editor_css_files.0.url }}';
 </ul>
 ```
 
-### Code splitting
-
-In case you wish to use [code-splitting](https://webpack.js.org/guides/code-splitting/), follow the recipe below on the Javascript side.
-
-Create your entrypoint file and add elements to the DOM, while leveraging the lazy imports.
-
-```js
-// src/principal.js
-function getComponent() {
-  return import("lodash")
-    .then(({ default: _ }) => {
-      const element = document.createElement("div");
-
-      element.innerHTML = _.join(["Hello", "webpack"], " ");
-
-      return element;
-    })
-    .catch((error) => "An error occurred while loading the component");
-}
-
-getComponent().then((component) => {
-  document.body.appendChild(component);
-});
-```
-
-On your configuration file, do the following:
-
-```js
-// webpack.config.js
-module.exports = {
-  context: __dirname,
-  entry: {
-    principal: "./src/principal",
-  },
-  output: {
-    path: path.resolve("./dist/"),
-    // publicPath should match your STATIC_URL config.
-    // This is required otherwise Webpack will try to fetch
-    // our chunk generated by the dynamic import from "/" instead of "/dist/".
-    publicPath: "/dist/",
-    chunkFilename: "[name].bundle.js",
-    filename: "[name]-[contenthash].js",
-  },
-  plugins: [
-    new BundleTracker({ path: __dirname, filename: "webpack-stats.json" }),
-  ],
-};
-```
-
-On your template, render the bundle as usual:
-
-```HTML+Django
-<!-- index.html -->
-{% load render_bundle from webpack_loader %}
-
-<html>
-  <body>
-    {% render_bundle 'principal' 'js' %}
-  </body>
-</html>
-```
-
 ### Jinja2 Configuration
 
 If you need to output your assets in a jinja template, we provide a Jinja2 extension that's compatible with [django-jinja](https://github.com/niwinz/django-jinja).

examples/README.md

@@ -29,5 +29,5 @@ Run django server
 Run webpack compiler
 
 ```bash
-./node_modules/.bin/webpack --config webpack.config.js --watch
+npx webpack --mode=development --watch
 ```

examples/code-splitting/webpack.config.js

@@ -1,21 +1,19 @@
 var path = require("path");
-var BundleTracker = require('webpack-bundle-tracker');
-
+var BundleTracker = require("webpack-bundle-tracker");
 
 module.exports = {
   context: __dirname,
   entry: {
-    'main': './assets/js/index',
-    'other': './assets/js/other',
+    main: "./assets/js/index",
+    other: "./assets/js/other",
   },
   output: {
-    path: path.resolve(__dirname, 'assets/bundles/'),
+    path: path.resolve(__dirname, "assets/bundles/"),
     filename: "[name]-[contenthash].js",
-    chunkFilename: "[name]-[contenthash].js"
   },
 
   plugins: [
-    new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
+    new BundleTracker({ path: __dirname, filename: "webpack-stats.json" }),
   ],
 
   module: {
@@ -25,13 +23,13 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
+          loader: "babel-loader",
         },
       },
     ],
   },
 
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: [".js", ".jsx"],
   },
-}
+};

examples/dynamic-imports/README.md

@@ -0,0 +1 @@
+../README.md

examples/dynamic-imports/app/__init__.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for app project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'app.settings')
+
+application = get_asgi_application()

examples/dynamic-imports/app/asgi.py

@@ -0,0 +1,119 @@
+"""
+Django settings for app project.
+
+Generated by 'django-admin startproject' using Django 3.2.2.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/3.2/ref/settings/
+"""
+
+from pathlib import Path
+import os
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-&24ubb46zaej*fd9jz1^mw1t0)-@zd9g74f!hcs1a48-7loo0r'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'webpack_loader',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'app.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, "templates")],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'app.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/3.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/3.2/howto/static-files/
+
+STATIC_URL = '/static/'
+
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, 'assets'),
+)
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'BUNDLE_DIR_NAME': 'bundles/',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
+    }
+}
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

examples/dynamic-imports/app/settings.py

@@ -0,0 +1,23 @@
+"""app URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/3.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+from django.views.generic import TemplateView
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', TemplateView.as_view(template_name='home.html'), name='home'),
+]

examples/dynamic-imports/app/urls.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for app project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'app.settings')
+
+application = get_wsgi_application()

examples/dynamic-imports/app/wsgi.py

@@ -0,0 +1,15 @@
+function getComponent() {
+    return import("lodash")
+        .then(({ default: _ }) => {
+        const element = document.createElement("div");
+
+        element.innerHTML = _.join(["Hello", "webpack"], " ");
+
+        return element;
+        })
+        .catch((error) => "An error occurred while loading the component");
+}
+
+getComponent().then((component) => {
+    document.body.appendChild(component);
+});