django-webpack · alihazemfarouk · Aug 23, 2018 · Sep 28, 2018 · Sep 28, 2018 · Sep 28, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 venv/
+.DS_Store
 
 # auto generated
 README.rst

diff --git a/README.md b/README.md
@@ -90,7 +90,9 @@ WEBPACK_LOADER = {
         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
         'POLL_INTERVAL': 0.1,
         'TIMEOUT': None,
-        'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
+        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
+        'EXCLUDE_RUNTIME': False,
+        'BASE_ENTRYPOINT': ''
     }
 }
 ```
@@ -166,6 +168,19 @@ and your webpack config is located at `/home/src/webpack.config.js`, then the va
 
 <br>
 
+#### EXCLUDE_RUNTIME
+
+`EXCLUDE_RUNTIME` is meant to be used with `render_entrypoint`. When creating multi-page applications, it's common to want to
+split a single runtime file that is used by all chunks. You can do that by using `{% render_bundle 'runtime' %}` in your base HTML file and setting `EXCLUDE_RUNTIME` to `True` in order to not include it again when using `{% render_entrypoint 'example_entry_point' %}`
+
+<br>
+
+#### BASE_ENTRYPOINT
+
+`BASE_ENTRYPOINT` is meant to be used with `render_entrypoint`. When creating multi-page applications, it's common to want to
+include common js in the base HTML. If the main entrypoint's name is `main`, you can do that by including `{% render_entrypoint 'main' %}` in your base HTML file. Now in another entrypoints (that extend the base HTML file), there might be some chunks that were already included in `main`, that means they would be included twice in the final rendered HTML, to avoid that, set `BASE_ENTRYPOINT` to `'main'`, then any duplicate chunks between an entrypoint and the main entrypoint would be included only once.
+
+<br>
 
 ## Usage
 <br>
@@ -188,6 +203,8 @@ INSTALLED_APPS = (
 
 ### Templates
 
+#### render_bundle
+
 ```HTML+Django
 {% load render_bundle from webpack_loader %}
 
@@ -212,6 +229,46 @@ INSTALLED_APPS = (
 </head>
 ```
 
+#### render_entrypoint (Available only when using Webpack v.4 or newer)
+
+```HTML+Django
+{% load render_entrypoint from webpack_loader %}
+
+{% render_entrypoint 'index' %}
+```
+
+`render_entrypoint` will render all the proper `<script>` and `<link>` tags needed in your template for that endpoint.
+Using this, you can make use of webpack 4 code splitting features.
+Example webpack config:
+```javascript
+module.exports = {
+  ...,
+  entry: {
+    index: "./myapp/static/src/pages/index.js",
+    contact_us: "./myapp/static/src/pages/contact_us.js",
+  },
+  ...,
+  plugins: [new BundleTracker({ filename: "./webpack-stats.json" })]
+};
+
+```
+
+Just as `render_bundle`, `render_entrypoint` also takes a second argument which can be a file extension to match, and can be used in a similar way,
+
+```HTML+Django
+{% load render_entrypoint from webpack_loader %}
+
+<html>
+  <head>
+    {% render_entrypoint 'main' 'css' %}
+  </head>
+  <body>
+    ....
+    {% render_entrypoint 'main' 'js' %}
+  </body>
+</head>
+```
+
 <br>
 
 

diff --git a/examples/code-splitting/README.md b/examples/code-splitting/README.md
diff --git a/examples/code-splitting/app/__init__.py b/examples/code-splitting/app/__init__.py
diff --git a/examples/code-splitting/app/settings.py b/examples/code-splitting/app/settings.py
diff --git a/examples/code-splitting/app/urls.py b/examples/code-splitting/app/urls.py
diff --git a/examples/code-splitting/app/views.py b/examples/code-splitting/app/views.py
diff --git a/examples/code-splitting/app/wsgi.py b/examples/code-splitting/app/wsgi.py
diff --git a/examples/code-splitting/assets/js/app.jsx b/examples/code-splitting/assets/js/app.jsx
diff --git a/examples/code-splitting/db.sqlite3 b/examples/code-splitting/db.sqlite3
diff --git a/examples/code-splitting/manage.py b/examples/code-splitting/manage.py
diff --git a/examples/code-splitting/package.json b/examples/code-splitting/package.json
diff --git a/examples/code-splitting/requirements.txt b/examples/code-splitting/requirements.txt
diff --git a/examples/code-splitting/webpack.config.js b/examples/code-splitting/webpack.config.js
diff --git a/examples/hot-reload/webpack.config.js b/examples/hot-reload/webpack.config.js
@@ -23,14 +23,14 @@ module.exports = {
   ],
 
   module: {
-    loaders: [
+    use: [
       // we pass the output from babel loader to react-hot loader
-      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'], },
+      { test: /\.jsx?$/, exclude: /node_modules/, use: ['react-hot',  'babel-loader'], },
     ],
   },
 
   resolve: {
-    modulesDirectories: ['node_modules', 'bower_components'],
-    extensions: ['', '.js', '.jsx']
+     
+    extensions: ['.css', '.js', '.jsx']
   },
 }
diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -16,14 +16,14 @@ module.exports = {
   ],
 
   module: {
-    loaders: [
+    use: [
       // we pass the output from babel loader to react-hot loader
-      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
+      { test: /\.jsx?$/, exclude: /node_modules/, use: [ 'babel-loader'], },
     ],
   },
 
   resolve: {
-    modulesDirectories: ['node_modules', 'bower_components'],
-    extensions: ['', '.js', '.jsx']
+     
+    extensions: ['.css', '.js', '.jsx']
   },
 }
diff --git a/tests/.babelrc b/tests/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}
diff --git a/tests/app/settings.py b/tests/app/settings.py
@@ -118,6 +118,12 @@
         'CACHE': False,
         'BUNDLE_DIR_NAME': 'bundles/',
         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-app2.json'),
+    },
+    'EXCLUDE_RUNTIME': {
+        'CACHE': False,
+        'BUNDLE_DIR_NAME': 'bundles/',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
+        'EXCLUDE_RUNTIME': True
     }
 }