如何使用webpack将现有Django应用程序与现有react应用程序连接

因此，我有一个Django项目作为后端REST服务器，我想将其与现有的React项目集成，该项目对该REST服务器进行AJAX调用。同样，这两个项目都已经存在，我只想把它们连接起来。假设我的Django项目的根是DJANGOROOT，这就是manage.py所在的位置。我的Django项目有两个Django应用程序，它们是项目的一部分。假设我的Django项目名为“mydjangoproj”，两个Django应用程序名为“myapp1”和“myapp2”，React项目名为“myreactproj”。这两个项目（带有两个应用程序的Django项目和React项目）都存储在单独的GIT repo中，要将它们连接到我的服务器上，我有以下目录结构：

DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc

请注意，React应用程序根文件夹位于DJANGOROOT内部，与我的django项目和应用程序文件夹平行

React应用程序使用一个名为React scripts（请参阅）的npm模块，该模块有一个构建脚本，该脚本将构建djangoot/myreactproj/src（以index.js开头）中的所有内容，并将所有这些内容放在一个名为djangoot/myreactproj/build的文件夹中。当我运行构建（使用“npm run build”）时，它会像下面这样填充文件夹djangoot/myreactproj/build：

DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

因此，要将Django连接到我的React应用程序，我必须找到一种方法，使Django（mydomain.com/）的根路径指向djangoot/myreactproj/build/index.html。我知道我必须创建一个“主”模板，该模板由运行在mydomain.com/上的Django视图启动，主模板必须启动React应用程序，如下所示：

DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

但我不确定我需要如何确切地告诉Django在哪里查找main.js（或者是index.js），也不确定如何让Django在djangoot/myreactproj/build/static中查看所有静态内容

我还在djangoot/myreactproj中运行了“npm list webpack”来获取webpack的版本，它显示了以下内容：

└─┬ react-scripts@1.0.11
  └── webpack@3.5.1 

我假设这意味着正在使用Webpack3.5.1，并且以某种方式与react脚本V1.0.11捆绑在一起

还要注意，Django应用程序已经在NGINX和UWSGI下的HTTPS下运行，因此这是一个真正的服务器，而不是开发服务器

---

经历过这个过程的人能告诉我需要做些什么来正确地连接这一切吗？

如果您的react应用程序使用django只是为了通过REST获取数据，为什么要在django模板中使用react？我认为这里首选的方法是分离而不是集成。使用自己的服务器创建独立的react应用程序（当然，两者都可以在一台物理服务器上运行）-这样，您的react应用程序和django应用程序将只通过rest调用进行通信，而无需其他任何操作。如果您在django应用程序中有一些资产，请将它们移动到前端react应用程序