How to setup django with webpack and webpack-dev-server

For loading and injecting webpack files I would recommend django-manifest-loader. To connect them we need a port for devServer, force the dev server to emit files and reference them with django
The setup: we have two servers webpack-dev-server and django.

in django settings.py we add (see https://django-manifest-loader.readthedocs.io/en/latest/docs/about_install.html#example-project-structure for more details):

INSTALLED_APPS += [“manifest_loader”]

we can skip installing the clean-plugin, webpack 5 has it inbuilt

new solution:

module.exports = (env, options) =>({
…
devServer: {
port: ‘8080’,
devMiddleware: {
writeToDisk: true,
},
headers: {
‘Access-Control-Allow-Origin’: ‘*’
},

},
plugins: [

new WebpackManifestPlugin({
writeToFileEmit: true,
}),
],
output: {
…
# replaces clean plugin
clean: true
}
}),

package.json

…
“scripts”: {
“serve:dev”: “webpack serve –mode development”,
}
…

see also:

https://github.com/devkral/secretgraph

old solution, just forget it