You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+21-9Lines changed: 21 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -56,7 +56,15 @@ The generated compiled files will be placed inside the `/assets/webpack_bundles/
56
56
57
57
### Compiling the front-end assets
58
58
59
-
You must generate the front-end bundle using `webpack-bundle-tracker` before using `django-webpack-loader`. You can compile the assets and generate the bundles by running `npx webpack --config webpack.config.js --watch`. This will also generate the stats file. You can also refer to how `django-react-boilerplate` configure the [package.json](https://github.com/vintasoftware/django-react-boilerplate/blob/master/package.json) scripts for different situations.
59
+
You must generate the front-end bundle using `webpack-bundle-tracker` before using `django-webpack-loader`. You can compile the assets and generate the bundles by running:
60
+
61
+
```bash
62
+
npx webpack --config webpack.config.js --watch
63
+
```
64
+
65
+
This will also generate the stats file. You can also refer to how `django-react-boilerplate` configure the [package.json](https://github.com/vintasoftware/django-react-boilerplate/blob/master/package.json) scripts for different situations.
66
+
67
+
> ⚠️ Hot reload is available through a specific config. Check [this section](#hot-reload).
60
68
61
69
> ⚠️ This is the recommended usage for the development environment. For **usage in production**, please refer to [this section](#usage-in-production)
62
70
@@ -83,7 +91,7 @@ WEBPACK_LOADER = {
83
91
}
84
92
```
85
93
86
-
For that setup, we're using the `DEBUG` variable provided by Django when bootstraping a new project. Since in a production environment (`DEBUG = False`) the assets files won't constantly change, we can safely cache the results (`CACHE=True`) and optimize our flow, as `django-webpack-loader` will read the stats file only once and store the assets files paths in memory. From that point pnwards, it will use these stored paths as the source of truth. If `CACHE=False`, we'll always read the stats file to get the assets paths.
94
+
For that setup, we're using the `DEBUG` variable provided by Django. Since in a production environment (`DEBUG = False`) the assets files won't constantly change, we can safely cache the results (`CACHE=True`) and optimize our flow, as `django-webpack-loader` will read the stats file only once and store the assets files paths in memory. From that point pnwards, it will use these stored paths as the source of truth. If `CACHE=False`, we'll always read the stats file to get the assets paths.
87
95
> ⚠️ If `CACHE=True`, any changes made in the assets files will only be read when the web workers are restarted.
88
96
89
97
During development, when the stats file changes a lot, we want to always poll for its updated version (in our case, we'll fetch it every 0.1s, as defined on `POLL_INTERVAL`).
@@ -130,12 +138,16 @@ Below is the basic usage for `render_bundle` within a template.
130
138
131
139
That will render the proper `<script>` and `<link>` tags needed in your template.
132
140
133
-
## Running the project
134
-
We must run both back-end and front-end projects to fully utilize `django-webpack-loader` and `webpack-bundle-tracker`. For the Webpack pipeline, please refer to [this section](#compiling-the-front-end-assets).
141
+
## Running in development
142
+
For `django-webpack-loader` to work, you must run the webpack pipeline. Please refer to [this section](#compiling-the-front-end-assets).
143
+
144
+
In summary, you should do the following:
135
145
136
-
Regarding the Django part, it should be run as a regular project.
137
146
```bash
138
-
python manage.py migrate
147
+
# in one shell
148
+
npx webpack --config webpack.config.js --watch
149
+
150
+
# in another shell
139
151
python manage.py runserver
140
152
```
141
153
@@ -200,8 +212,8 @@ The `is_preload=True` option in the `render_bundle` template tag can be used to
200
212
</html>
201
213
```
202
214
203
-
### Accessing other assets from the front-end project
204
-
`webpack_static` template tag provides facilities to load static assets managed by webpack in django templates. It is like django's built in `static` tag but for webpack assets instead.
215
+
### Accessing other webpack assets
216
+
`webpack_static` template tag provides facilities to load static assets managed by webpack in Django templates. It is like Django's built in `static` tag but for webpack assets instead.
205
217
206
218
In the below example, `logo.png` can be any static asset shipped with any npm package.
207
219
@@ -241,7 +253,7 @@ qwe
241
253
</html>
242
254
```
243
255
244
-
### Multiple Webpack projects
256
+
### Multiple Webpack configurations
245
257
Version 1.0 and up of `django-webpack-loader` also supports multiple Webpack configurations. The following configuration defines 2 Webpack stats files in settings and uses the `config` argument in the template tags to influence which stats file to load the bundles from.
0 commit comments