Create React App集成Django后端与Babel+Webpack构建流配置咨询

认知纠正 #

CRA 底层基于 Webpack + Babel 封装，执行 eject 后可在项目根目录的 config 文件夹下看到完整的 Webpack 配置文件，不存在不使用 Webpack 的情况，你之前的 Webpack 开发监听逻辑完全可以适配复用。

开发环境热更+Django 对接方案 #

无需额外修改 Webpack 配置的实现方案（操作最简单） #

• 首先在 CRA 项目的 package.json 中新增 proxy 配置项，值为 Django 服务的本地运行地址，示例：

"proxy": "http://127.0.0.1:8000"

• 开发阶段分别启动两个服务：Django 服务正常启动，前端直接运行 CRA 自带的 npm start 命令
• 此时前端运行在默认的 3000 端口，自带模块热更新能力，修改 React 代码后页面会自动刷新，所有 API 请求会自动通过代理转发到 Django 后端，无需手动执行 build。

已执行 eject 后的配置适配 #

你之前的 webpack --mode development --watch 对应的功能，CRA eject 后已经内置完成，你只需修改 package.json 中的 scripts 字段即可直接使用：

"scripts": {
  "dev": "node scripts/start.js",
  "build": "node scripts/build.js"
}

运行 npm run dev 即可实现和之前 Webpack+Babel 项目完全一致的开发监听+自动更新效果，对接 Django 还是按照上述代理配置操作即可。

上线阶段处理 #

上线前执行 npm run build 命令，将生成的 build 文件夹交给 Django 托管即可，和你之前看到的教程操作逻辑一致。

内容的提问来源于stack exchange，提问作者James Huang