Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

render_entrypoint tag #182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alihazemfarouk wants to merge 18 commits into django-webpack:master from alihazemfarouk:master
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e8b19f1
Add initial render_entrypoint version
scdekov Aug 23, 2018
05df949
Webpack 4
Sep 28, 2018
522be18
Webpack 4
Sep 28, 2018
c12f42c
Remove code splitting test and examples
Sep 28, 2018
29ca185
Update test cases
Sep 28, 2018
8e57724
Remove confusing param
Sep 28, 2018
2a14570
Update package-lock
Sep 28, 2018
e4c0a45
generate path from chunk name and BUNDLE_DIR_NAME.
alihazemfarouk Nov 15, 2018
3eaee95
flatten list of chunks in an entrypoint
alihazemfarouk Nov 16, 2018
56dd1c6
added documentation and readme for render_entrypoint tag
alihazemfarouk Nov 18, 2018
f18738c
check if the key entryPoints exists, otherwise raise error
alihazemfarouk Nov 21, 2018
bad972b
Merge pull request #1 from prayerslayer/chore/update-tests-to-webpack4
alihazemfarouk Nov 21, 2018
83df98b
added tests for the new templatetag render_entrypoint
alihazemfarouk Nov 21, 2018
47c577d
added check for runtime.js in tests when using render_entrypoint
alihazemfarouk Nov 21, 2018
88e49a6
added exclude_runtime and base_entrypoint configs
alihazemfarouk Jan 9, 2019
a4db79f
Merge branch 'master' into master
alihazemfarouk Jan 9, 2019
883dea4
fixed some typos in documentation
alihazemfarouk Feb 3, 2019
7206556
implemented filtering by extension feature for render_entrypoint tag
alihazemfarouk Feb 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
venv/
.DS_Store

# auto generated
README.rst
Expand Down
59 changes: 58 additions & 1 deletion README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': ''
}
}
```
Expand Down Expand Up @@ -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.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate "When creating multi-page applications, it's common to want to
 include common js in the base HTML"

Copy link
Author

@alihazemfarouk alihazemfarouk Feb 3, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not by mistake. If you have a clearer way to explain it, please suggest it to me, or do it yourself and push it here


<br>

## Usage
<br>
Expand All @@ -188,6 +203,8 @@ INSTALLED_APPS = (

### Templates

#### render_bundle

```HTML+Django
{% load render_bundle from webpack_loader %}

Expand All @@ -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>


Expand Down
1 change: 0 additions & 1 deletion examples/code-splitting/README.md
View file Open in desktop

This file was deleted.

View file Open in desktop
Empty file.
115 changes: 0 additions & 115 deletions examples/code-splitting/app/settings.py
View file Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions examples/code-splitting/app/urls.py
View file Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion examples/code-splitting/app/views.py
View file Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions examples/code-splitting/app/wsgi.py
View file Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions examples/code-splitting/assets/js/app.jsx
View file Open in desktop

This file was deleted.

Binary file removed examples/code-splitting/db.sqlite3
View file Open in desktop
Binary file not shown.
10 changes: 0 additions & 10 deletions examples/code-splitting/manage.py
View file Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions examples/code-splitting/package.json
View file Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions examples/code-splitting/requirements.txt
View file Open in desktop

This file was deleted.

37 changes: 0 additions & 37 deletions examples/code-splitting/webpack.config.js
View file Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions examples/hot-reload/webpack.config.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
},
}
8 changes: 4 additions & 4 deletions examples/simple/webpack.config.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
},
}
3 changes: 3 additions & 0 deletions tests/.babelrc
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-react"]
}
6 changes: 6 additions & 0 deletions tests/app/settings.py
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}

Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /