Примерная схема как настроить django+webpack

django+webpack.md

Примерная схема как настроить django+webpack

Есть 2 основных варианта

1. собирать webpack-ом файлы как статику (простой)
2. разделить фронтенд и бэкенд (сложнее)

Мы пока будем использовать 1-ый вариант и можно будет перейти на 2-ой после docker и spa. Но если вы сразу настроите 2-ой вариант будет супер

Это пример сложной настройки https://www.digitalocean.com/community/tutorials/how-to-build-a-modern-web-application-to-manage-customer-information-with-django-and-react-on-ubuntu-18-04-ru

А простую я опишу подробнее тут.

Последовательность действий

1. В проекте django создать новое приложение frontend python manage.py startapp frontend

2. В папке static создать создать папку frontend. В нее мы будем собирать webpack-ом готовые файлы

3. Переходим в папку приложения frontend и создаем окружение: npm init -y

4. Устанавливаем нужные модули npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server Это webpack и babel

5. Входные файлы будут находиться у нас в папке frontend/src, а выходные в папке static/frontend Для этого в package.json укаваем пути "scripts": { "dev": "webpack --mode development ./src/index.js --output ../static/frontend/index.js", "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js" },

6. Чтобы babel правильно преобразовывал файлы в файле package.json указываем "babel": { "presets": [ "@babel/env", "@babel/react" ] },

7. В папке frontend создаем файл webpack.config.js со следующим содержанием module.exports = { entry: "./frontend/src/index.js", module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } };

8. Почти все готово. Теперь в папке src создаем файл index.js, в нем будет наш код на js с axios

9. В файле index.js пишем что нибудь для проверки. Например alert(1);

10. Далее запускаем npm run dev. Если всё верно то у нас не будет ошибок и в папке static/frontend появиться файл index.js, который для нас создаст webpack

11. Далее мы берем этот файл и подключаем его к любой странице

<script src="{% static 'frontend/index.js' %}"></script>

Это первоначальная настройка можно ее улучшать и развивать, пути могут немного отличаться.

Вот такая структура должна получитья

project -> ... -> frontend -> src -> тут скрипты входные -> package.json -> webpack.config.js -> static -> frontend -> тут скрипты выходные -> ...

Отлично, замечательно, спасибо, вы помогли!

Предлагаю чуть-чуть усложнить схему ради удобства разработки.
Можно заставить webpack5 записывать файл на диск не через скрипт в package.json

"dev": "webpack --mode development ./src/index.js --output ../static/frontend/index.js",

А при помощи настройки самого вебпака в webpack.config.js

module.exports = {
	output: {
    filename: pathdata => (pathdata.chunk.name + '.js'),
    path:     path.resolve(__dirname, 'static/frontend/js'),
  },
	devServer: {
    open:          true,
    port:          3003,
    devMiddleware: {
      index:            true,
      writeToDisk:      true,
      publicPath:       '/static/frontend/js/',
      serverSideRender: true,
    }
  },
}

Так можно будет организовать несколько entry points, благодаря чему для разных приложений django будет подключаться разный, поэтому уменьшенный размер, и при этом будет работать автоматическая пересборка при редактировании js