For many people, it is not easy to make Django work with modern frontend tech, such as
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 (
This is a PAIN, so I decide to help people solve it!
Webpackis the most popular bundle solution in the frontend community today, it has received 50k stars on Github.
- It has a great ecosystem, many plugins, loaders. If we search
webpackon npmjs.com, we can get 20k resulst.
- If we do not need
Vue, we can still use Webpack to help us compile
SCSSand do many other things (Many people do not know that!)
- With a proper config, Webpack can save time and let us build modern web application in quick way.
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:
- Create a
Webpackproject and make it run in
- Understand Webpack loader and Webpack plugin workflow.
- Learn the difference between
productionmode in Webpack.
Webpackto check code style of JS.
Webpackto check code style of SCSS, CSS.
- Learn what is Webpack
PublicPath, and config it to work with Django.
django-webpack-loaderto load hash bundle file in Django.
- Understand the code splitting workflow in Webpack.
- Learn how to config splitChunks to control the splitting behavior.
- Understand what is Webpack
HMRand the workflow
- Learn to make webpack-dev-server work with Django
- Learn what is
HtmlWebpackPluginand how it works.
HtmlWebpackPluginand Django Template inheritance to load Webpack bundle
- We can still use Django template syntax and HTML as we are familiar with
- We do not need DRY (Django REST framework) and similar frameworks to expose data through API.
- We do not need to implement JWT, but using Django
- We can write JS and SCSS in modern syntax, the code is more readable and easy to maintain.
- Code linter can help check JS and CSS code style.
- We can develop in flexible way, for example, we can use
Vue.jsto build some components in the web pages, and write other parts in Django template.
- Django 3.1
- Webpack 5
- jQuery 3.5.1
- Bootstrap 4.5
Table of content
- Introduction (this article)
- Setup Webpack Project with Django
- Load Webpack bundles in Django
- Linting in Webpack (coming soon)
- Loading Webpack hash bundle in Django (coming soon)
- Code splitting with Webpack (coming soon)
- How to use webpack-dev-server with Django to support HMR (coming soon)
- How to load Webpack bundle in Django without using 3-party package (coming soon)