Definitive Guide to Django and Webpack

1. Introduction
2. Setup Webpack Project with Django
3. Load Webpack bundles in Django
4. Linting in Webpack
5. Load Webpack hash bundle in Django
6. Code splitting with Webpack
7. How to config HMR with Webpack and Django
8. How to use HtmlWebpackPlugin to load Webpack bundle in Django

If you want a quick start with Webpack and Django, please check python-webpack-boilerplate

Background

For many people, it is not easy to make Django work with modern frontend tech, such as ES6, SCSS.

If we check online, many blog posts and tutorials are from view of frontend (such as building Single-page application), which might not work very well if we want to put JS, CSS files in Django template.

What is more, popular Django boilerplate projects on Github (such as cookiecutter-django) are still using a little outdated frontend tech (gulp workflow).

This is a PAIN, so I decide to help people solve it!

Why Webpack

1. Webpack is the most popular bundle solution in the frontend community today, it has received 50k stars on Github.
2. It has a great ecosystem, many plugins, loaders. If we search webpack on npmjs.com, we can get 20k resulst.
3. If we do not need React, Vue, we can still use Webpack to help us compile ES6, SCSS and do many other things (Many people do not know that!)
4. With a proper config, Webpack can save time and let us build modern web application in quick way.

Objectives

This tutorial series will teach you how to config Webpack to work with Django.

We will not build SPA (separate frontend from backend), but use Webpack to do bundle work, and then load the bundle file in Django template.

By the end of this course, you will be able to:

1. Create a Webpack project and make it run in watch mode.
2. Understand Webpack loader and Webpack plugin workflow.
3. Learn the difference between development mode and production mode in Webpack.
4. Use Eslint and Webpack to check code style of JS.
5. Use Stylelint and Webpack to check code style of SCSS, CSS.
6. Understand hash, chunkhash, and contenthash in Webpack
7. Learn what is Webpack PublicPath, and config it to work with Django.
8. Use django-webpack-loader to load hash bundle file in Django.
9. Understand the code splitting workflow in Webpack.
10. Learn how to config splitChunks to control the splitting behavior.
11. Understand what is Webpack HMR and the workflow
12. Learn to make webpack-dev-server work with Django
13. Learn what is HtmlWebpackPlugin and how it works.
14. Use HtmlWebpackPlugin and Django Template inheritance to load Webpack bundle

Benefits

1. We can still use Django template syntax and HTML as we are familiar with
2. We do not need DRY (Django REST framework) and similar frameworks to expose data through API.
3. We do not need to implement JWT, but using Django standard auth.
4. We can write JS and SCSS in modern syntax, the code is more readable and easy to maintain.
5. Code linter can help check JS and CSS code style.
6. We can develop in flexible way, for example, we can use React or Vue.js to build some components in the web pages, and write other parts in Django template.

Tech

• Django 3.1
• Webpack 5
• jQuery 3.5.1
• Bootstrap 4.5

Table of content

1. Introduction
2. Setup Webpack Project with Django
3. Load Webpack bundles in Django
4. Linting in Webpack
5. Load Webpack hash bundle in Django
6. Code splitting with Webpack
7. How to config HMR with Webpack and Django
8. How to use HtmlWebpackPlugin to load Webpack bundle in Django

If you want a quick start with Webpack and Django, please check python-webpack-boilerplate