Question

我已经在这部分中坚持了一段时间来渲染一个带有反应容器的简单的基本HTML页面。会发生什么是系统无法找到捆绑包，在浏览器中弹出以下错误 - 元素检查： main-e81ebca393352343ecd4.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)

在“python manage.py runserver”终端窗口中弹出以下错误：

[29/Aug/2017 16:40:57] "GET / HTTP/1.1" 200 269
[29/Aug/2017 16:40:57] "GET /static/bundles/main-e81ebca393352343ecd4.js HTTP/1.1" 404 1721

现在我已经多次使用我的settings.py文件和我的webpackconfig.js文件，但是，到目前为止，我还没能找到我的错误。

webpack.config.js：

//require our dependencies
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means 
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index', 

    output: {
        //where you want your compiled bundle to be stored
        path: path.resolve('./assets/bundles/'), 
        //naming convention webpack should use for your files
        filename: '[name]-[hash].js', 
    },

    plugins: [
        //tells webpack where to store data about your bundles.
        new BundleTracker({filename: './webpack-stats.json'}), 
        //makes jQuery available in every module
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        })
    ],

    module: {
        loaders: [
            //a regexp that tells webpack use the following loaders on all 
            //.js and .jsx files
            {test: /\.jsx?$/, 
                //we definitely don't want babel to transpile all the files in 
                //node_modules. That would take a long time.
                exclude: /node_modules/, 
                //use the babel loader 
                loader: 'babel-loader', 
                query: {
                    //specify that we will be dealing with React code
                    presets: ['react'] 
                }
            }
        ]
    },

    resolve: {
        //tells webpack where to look for modules
        modules: ["node_modules"],
        //extensions that should be used to resolve modules
        extensions: ['.js', '.jsx'] 
    }   
}

settings.py：（剪切）

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


STATIC_URL = '/static/'


STATICFILES_DIR = (
    os.path.join(BASE_DIR, 'assets'),
)

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

url.py：

from django.conf.urls import include, url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

的index.html

{% load render_bundle from webpack_loader %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Django+React!</title>
</head>
<body>
    <div id="container">
    </div>
    {% render_bundle 'main' %}
</body>
</html>

index.js

var React = require('react')
var ReactDOM = require('react-dom')

var Hello = React.createClass ({
    render: function() {
        return (
            <h1>
             Hello, React! How do you do?
            </h1>
        )
    }
})

ReactDOM.render(<Hello />, document.getElementById('container'))

Folder Path/Directory Structure

现在这是我到目前为止所尝试的：

更改 STATIC_URL ='/ static /'：路径也会更改错误;但它没什么大不了的，因为它仍然有相同的错误（即使我使用“/ assets /”作为我的静态目录。
一遍又一遍地浏览我的urls.py和webpack文件，也没有成功。

在我看来，我无法正确定义index.js文件的路径，因为webpack-loader能够毫无顾虑地生成捆绑包。

提前感谢您的关注。

无法渲染捆绑（404） - 与Django

0 个答案: