[Django]-Webpack: Generate index.html for use with Django

by

3👍

Webpack uses the html-webpack-plugin to generate the templates. I’ve found a workaround (it feels hacky, and it’s certainly an extra layer of work) which uses the webpack.config.js along with the django templates.

Note that Angular2/4/5/whatever doesn’t give you access to its webpack config. Use ng eject (See this answer) to extract it. The webpack.config.js below is an excerpt with modifications.

DISCLAIMER I’ve only ever used this with a Webpack + Django project. Changing the default Webpack config for Angular2 seems like a huge rabbit hole to go into. I would suggest avoiding this and using Django Rest Framework + Angular2 to completely separate the back-end from the front-end. But to each its own i guess; below is my solution:

// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin'); // should already be here,
                                            // but it's the main player of this excerpt

module.exports = {
    // ...
    "entry": {
        "main": ["./src/main.ts"],
        "polyfills": ["./src/polyfills.ts"],
        "styles": ["./src/assets/css/styles.css"]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "publicPath": '/'             // <- this is new
    },
    // ...
    "plugins": [
        // ...
        new HtmlWebpackPlugin({
            "template": "./templates/index.html", // <- path to your template
            "filename": "./path/of/output/file.html", // <- output html file
                                              // default  is './index.html'
            "inject": false // <- this allows you to place the static files
                            //    where you want them
     // ...

Then 

# my_project.settings.py
# ...
# assuming your angular and django projects share the same base dir
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'src'), # <- this is webpack's output dir
)

Then in your template 

<!-- templates/index.html -->
{% load static %}
<html>
  <head>
    <base href="/">
    <title>App</title>
    <link href="{% static 'dist/app.css' %}" rel="stylesheet">
  </head>
  <body>
    <my-app>Loading...</my-app>
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.polyfills.entry' %}"></script>
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.vendor.entry' %}"></script>
    <script type="text/javascript" src="{% static '<%= htmlWebpackPlugin.files.chunks.app.entry' %}"></script>

  </body>

</html>

You will have to run django’s python manage.py collectstatic --clear after every webpack build (in order to clean the ‘static’ folder).

👤djangulo

Leave a comment