空白Django ReactJS网页，无错误

我已经学习了很多关于如何为Django设置Django和ReactJS以使用Django Web服务器提供静态文件的示例

我相信我有一个很好的工作版本，但由于某些原因，我得到了一个空白页，但没有错误

我是ReactJS新手，但我相信这是一个与Babel兼容的问题。似乎有新的巴别塔代码和教程，我一直在阅读日期。有一件事需要注意。当我运行这段代码时，我从文章中复制了这段代码 ，使用NPM启动…服务器工作正常。但是，Django没有处理它，而是加载它

任何帮助都会非常感激，因为我没有主意了

这是我的密码：

设置.PY

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webpack_loader',
'arlo_project'
]

STATIC_URL = '../../build/'

STATICFILES_DIRS = (
os.path.join(BASE_DIR, '/build/static'),
# We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
)

WEBPACK_LOADER = {
'DEFAULT': {
    'BUNDLE_DIR_NAME': 'bundles/',
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}

WEBPACK.CONFIG.JS

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
context: __dirname,

entry: {
     main:'./src/index',
     vendors: ['react'],
},
// entry point of our app.
// src/index.js should require other js modules and dependencies it needs

output: {
    //Where you put the compiled bundle to be stored
    path: path.resolve('./build/bundles/'),
    filename: "[name]-[hash].js",
},

plugins: [
    //tells webpack where to store data about your bundles.
    new BundleTracker({path: ".", filename: '/webpack-stats.json'}),
],

module: {
    rules: [
        {
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader',
            query: {
                //presets: ['@babel/preset-env', '@babel/preset-react']
                 presets: ['@babel/env', '@babel/react'],
                 plugins: ["transform-class-properties"]
            }
        },
        //loader for font files (used by fontawesome, etc)
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        },

        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.js?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                presets: ['@babel/env', '@babel/react'],
                plugins: ["transform-class-properties"]
                //presets: ['@babel/preset-env', '@babel/preset-react']
            }
        }
    ],
},

resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx']
},
mode: 'development',

}

package.json

{
 "name": "arlo_project",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@babel/preset-react": "^7.0.0-beta.44",
 "axios": "^0.18.0",
 "babel-cli": "^6.26.0",
"material-ui": "^0.20.0",
"npm": "^5.8.0",
"react-dom": "^16.3.1",
"react-dropzone": "^4.2.9",
"react-scripts": "^1.1.4",
"react-tap-event-plugin": "^3.0.2",
"superagent": "^3.8.2"
},
"scripts": {
"start": "/usr/local/bin/react-scripts start",
"start:dev": "webpack-dev-server",
"build": "/usr/local/bin/react-scripts build",
"test": "/usr/local/bin/react-scripts test --env=jsdom",
"eject": "/usr/local/bin/react-scripts eject"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"babel-core": "^6.26.0",
"babel-loader": "^8.0.0-beta.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-app": "^1.5.2",
"css-loader": "^0.28.11",
"react": "^16.3.1",
"webpack": "^4.5.0",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}

index.html

{% extends 'Base.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}

{% block main %}
  <div id="root"></div>
     {% render_bundle 'vendors' %}
     {% render_bundle 'main' %}
{% endblock %}

{%extends'Base.html%}
{%load staticfiles%}
{%load render_bundle from webpack_loader%}
{%block main%}
{%render_bundle'供应商'%}
{%render_bundle'主“%”
{%endblock%}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；

您能看到正确的html文件吗？babel是否正确传输了

index.js

？您能否在html文件中看到正在添加的正确脚本（即从./build/bundles传输的版本）是的，我看到了脚本标记，但没有从react页面输出。如果index.js，则不会传输任何内容。我想知道加载静态文件标签是否是问题所在。你应该以某种方式运行webpack。尝试

npm启动：dev

。顺便说一句，如果您不打算使用node，那么可能

create react应用程序

并不最适合您。也许最好创建一个易于理解和调试的开发环境。