我有一个使用WebPack集成的Django React应用程序。
文件结构如下：

|--CSP
    |--api        /*django side*/
    |--CSP
        |--Settings.py
        |--urls.py
    |--frontend   /*react side*/
        |--dist   /*The template*/
            |--index.html
            |--bundle.js
        |--src
            |--components
                |--App.js
            |--index.js
            |--styles.css
        |--tailwind.config.js
        |--postcss.config.js
        |--urls.py
        |--views.py
        |--webpack.config.js

设置.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'api.apps.ApiConfig',
    'rest_framework',
    'frontend.apps.FrontendConfig'
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Views.py（前端）

from django.shortcuts import render

# Create your views here.
def index(request, *args, **kwargs):
    return render(request, '/csp/frontend/dist/index.html')

urls.py（前端）

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index)
]

网络包配置js

const path = require('path')
var webpack = require('webpack');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV' : JSON.stringify('development')
    })
],
}

react和django都可以完美地独立工作。
我尝试将index.html移动到一个名为template的文件夹。
如果有任何更多的文件，我需要包括让我知道。