html-webpack-plugin-django

A template for Typescript projects

At a glance

Getting started

First, install the package

# npm install -D html-webpack-plugin-django
yarn add -D html-webpack-plugin-django

In your webpack.config.js file add the plugin after html-webpack-plugin. html-webpack-plugin-django will output Django static tags in the head and body of your HTML index file.

This plugin operates under a few assumptions:

1. You have added the {% load static %} tag to your HTML template
2. Your webpack bundle is emitted in one of your Django project's static files directories.

Example

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginDjango = require("html-webpack-plugin-django");

module.exports = (env, argv) => {
  return {
    output: {
      path: path.resolve("path/to/your/django/static/dist"),
      filename: "js/[name].[contenthash].js",
      publicPath: "/static/",
    },
    ...
    plugins: [
      new HtmlWebpackPlugin(),
      new HtmlWebpackPluginDjango({ bundlePath: "dist" }),
    ],
  };
};

Output

<script defer src="{% static 'dist/js/runtime.1198543abbf33da21374.js' %}"></script>

Found a bug?

Please file a report in this repository's issues

Development

If you want to contribute to this project, that's great to hear!

You can start at CONTRIBUTING.md.

To do

• Add integration test with Webpack and html-webpack-plugin