Javascript 网页包无法加载资源。bundle.js 404_Javascript_Python_Reactjs_Flask_Webpack

Javascript 网页包无法加载资源。bundle.js 404

javascript python reactjs flask webpack

Javascript 网页包无法加载资源。bundle.js 404,javascript,python,reactjs,flask,webpack,Javascript,Python,Reactjs,Flask,Webpack,有点背景。我一直在遵循本教程：并且已经在标题中对该问题进行了一段时间的疑难解答代码进行编译，服务器运行，但是查找bundle.js时出现404错误我的文件夹结构是： . ├── web-app ├── configurations.py ├── __init__.py ├── README.md ├── run.py └── templates ├── hello │ ├── __init__.py

有点背景。我一直在遵循本教程：并且已经在标题中对该问题进行了一段时间的疑难解答

代码进行编译，服务器运行，但是查找bundle.js时出现404错误

我的文件夹结构是：

.
├── web-app
    ├── configurations.py
    ├── __init__.py
    ├── README.md
    ├── run.py
    └── templates
        ├── hello
        │   ├── __init__.py
        │   └── views.py
        ├── __init__.py
        ├── public
        │   ├── css
        │   ├── fonts
        │   ├── images
        │   └── js
        └── static
            ├── index.html
            ├── __init__.py
            ├── js
               ├── components
               ├── index.jsx
               └── routes.js

我的webpack.config.js是：

var path = require('path')
const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
    devtool: 'eval-source-map',
    entry: __dirname + '/js/index.jsx',
    output:{
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js','.jsx','.css']
    },
    module: {
        rules: [
              {
                  test: /\.jsx?/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                      presets: ['react', 'es2015']
                  }
              },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'
            }]
    }
};
module.exports = config;

最后，我的index.js是：

<!— index.html —>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/main.css">
    <title>Creating a Full-Stack Python Application with Flask, NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

我知道这是很多代码，但经过大量的研究和故障排除后，我仍停留在第一步。任何帮助或指导都将不胜感激

谢谢

在index.html中，

脚本的src
指向public/bundle.js
，但您的网页包配置的输出是（包含网页包配置的目录）/dist/bundle.js
。您的文件夹结构没有显示网页包配置的位置，但您希望确保配置的输出和htmlscript
的src
属性指向同一路径。
一年后更新。我很快就明白了这一点，并使用Webpack和Heroku创建了一个烧瓶/反应样板。这确实不是一则广告，但以下是回购协议，以防任何人出现类似问题：
因此webpack.config.js与~/web app/templates/static中的index.html文件位于同一目录中。我已经将index.html中的src改为dist/bundle.js，但仍然得到相同的错误。有什么我遗漏的吗？听起来你的webpack config和index.html现在指向同一个文件位置，所以这可能是你的Flask应用程序中的路由问题。我想你是对的。我将单独研究路由。我已将您的答案标记为正确，并感谢您的帮助！没问题，我希望你能找到解决办法，对不起，我帮不了你！
from flask import Flask

app = Flask(__name__,
            static_folder = './public',
            template_folder="./static")

from templates.hello.views import hello_blueprint
# register the blueprints
app.register_blueprint(hello_blueprint)