Из того, что я могу понять из вашего вопроса: когда вы впервые отображаете div с надписью 'test', он рендерится, но после этого дальнейшие изменения не обновляются.
Это потому, что javascript не используется.обновлен Django, и вам нужно использовать collectstatic для синхронизации сборок, что не очень эффективно.
Для этого нужно использовать django-webpack-loader и webpack-bundle-tracker .
установить webpack-bundle-tracker
npm установить --save-dev webpack-bundle-tracker
установить django-webpack-loader :
pip установить django-webpack-loader
django-webpack-loader - это пакет python, который вставляет ссылку и тег сценария для пакетов, которые веб-пакет генерирует динамически.
webpack-bundle-tracker Плагин отправляет необходимую информацию о процессе компиляции веб-пакета в json file so django-webpack-loader может потреблять его.
Чтобы веб-пакет отслеживал изменения, внесенные в ваше приложение, вам необходимо создать сервер, который будет отслеживать изменения в вашем приложении React и связать ваш JS.
Примечание: Мы используем сервер узлов.
// Webpack Server
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.server.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline: true,
historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
if (err) {
console.log(err)
}
console.log('Listening at 0.0.0.0:3000')
});
Файлы конфигурации, используемые webpack.server.js , будут иметь webpack.server.config.js
// webpack.server.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
entry: {
main: './frontend/src/index.js',
devServer: 'webpack-dev-server/client?http://localhost:3000'
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/bundles/'),
publicPath: 'http://localhost:3000/frontend/static/frontend/bundles/', // django-webpack-loader overrides django's STATIC_URL with this path
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
devServer: {
contentBase: './frontend/static/frontend/bundles/',
},
};
Обратите внимание, что по умолчанию сервер будет хранить пакеты в памяти, а не записывать их на диск
Когда сервер остановлен, будетникаких признаков связанных файлов, поскольку они не были скомпилированы в память.
Чтобы создать файлы в памяти при разработке, создайте другой файл конфигурации по адресу webpack.dev.config.js
// webpack.dev.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
entry: {
main: './frontend/src/index.js',
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/bundles/'),
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
};
Пока вы создаете свои файлы для Production, создайте еще один файл конфигурации по адресу webpack.prod.config.js
// webpack.prod.config.js
const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'production',
entry: {
main: './frontend/src/index.js',
},
output: {
filename: "[name].js",
path: path.resolve('./frontend/static/frontend/dist/'),
},
plugins: [
new BundleTracker({filename: './frontend/webpack-stats-prod.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
],
};
В ваших настройках Django ;
import sys
import os
# Assuming this is your base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Also assuming this is your base directory
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
# In development
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), # Path to 'webpack-stats.json'
}
}
# In production
if not DEBUG:
WEBPACK_LOADER['DEFAULT'].update({
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json') # Path to 'webpack-stats-prod.json'
})
INSTALLED_APPS = (
...
'webpack_loader',
)
Ваш index.html должен выглядеть следующим образом;
{% load render_bundle from webpack_loader %} <<< Add this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django-React</title>
</head>
<body>
<div id="app" class="columns">
<!-- React -->
</div>
{% render_bundle 'main' %} <<< Add this.
</body>
</html>
Теперь вашpackage.json должен выглядеть так:
"scripts": {
"dev": "node ./webpack.server.js",
"build-dev": "webpack --mode development --config ./webpack.dev.config.js",
"build-prod": "webpack --mode production --config ./webpack.prod.config.js"
}
Итак, для разработки с автоматическим связыванием просто запустите:
npm, запустите dev
Toсоберите файлы в память после остановки сервера веб-пакетов, просто запустите:
npm run build-dev
И, наконец, для сборки с производственной оптимизацией просто запустите:
npm run build-prod
Я пытался изменить ваш проект, чувствую, что он настроен в соответствии со структурой вашего проекта.Проверьте ниже ссылки, чтобы направлять вас лучше.Они помогли мне!
Рекомендации:
- Давайте модернизируем способ обработки кода веб-интерфейса с помощью Django
- Использование Webpack прозрачнос Django + горячая перезагрузка компонентов React в качестве бонуса
- Modern Django: Часть 1. Настройка Django и React