Question

一些背景。我一直在关注本教程：https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd，并且已经对标题中的问题进行了一段时间的故障排除。

代码会编译并运行服务器，但是在寻找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>

我运行“ npm run watch”并由于无法找到bundle.js而收到404错误。它寻找的URL路径是https://www.mywebsitehere.com/public/bundle.js。

我相信我已经设置了flask在我的web-app / templates / init .py文件中寻找正确的路径，如下所示：

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)

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

谢谢！

Answer 1

在index.html中，script的{{1}}指向src，但是Webpack配置的输出却是public/bundle.js。您的文件夹结构没有显示webpack配置的位置，但是您要确保配置的输出和html (dir containing webpack config)/dist/bundle.js的{{1}}属性指向同一路径。

Answer 2

一年后更新。我很快就发现了这一点，并使用Webpack和Heroku创建了Flask / React样板。这确实不是广告，但是如果有人遇到类似问题，这里是回购：

https://github.com/ranstotz/flask-react-boilerplate

Webpack无法加载资源。 bundle.js 404

2 个答案: