Question

我正在尝试在我设置的简单Flask服务器上运行基于反应的Web应用程序。我使用webpack捆绑我的所有前端包。但是，我发现当我运行服务器时，找不到创建的javascript文件（bundle.js）。

我的webpack配置（webpack.config.js）是：

var webpack = require('webpack');
const path = require('path');

module.exports = {
  context: path.join(__dirname, '/src'),
  entry: [
    './index.js',
  ],
  output: {
    path: path.join(__dirname, '/www'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
    ],
  },
  resolve: {
    modules: [
      path.join(__dirname, 'node_modules'),
    ],
  },
};

将bundle.js输出到/ www /目录。

同样在/ www /目录中是我的index.html文件：

<html>
    <head> 
        <link rel="stylesheet" href="/static/style.css">
    </head>
    <body>
        <p>HERE</p>
        <div id = "image-upload"></div>
        <div id = "sudoku_game"></div>
        <script src="/bundle.js" ></script>
    </body>
</html>

最后。我写的Flask服务器非常简单：

from flask import Flask, render_template

app = Flask(__name__, static_folder="../www", 
            template_folder = "../www")

@app.route("/")
def index():
     return render_template("index.html")

if __name__ == "__main__":
    app.run()

如您所见，bundle.js和index.html位于同一级别的同一目录中。

当我运行服务器时（使用python server.py）。 localhost：5000显示“HERE”但随后抛出：

GET http://localhost:5000/bundle.js 404 (NOT FOUND)

有趣的是，当我在Express js服务器上运行相同的应用程序时，没有找到bundle.js的问题。我想切换到Flask的原因是我有想在服务器端运行的python脚本。

谁能告诉我出了什么问题？我怀疑由于某种原因，bundle.js从未编译过，但是即使我将它保存到磁盘上，服务器也找不到bundle.js.

作为参考，我的目录结构是：

-sud(parent)  
-----node_modules  
-----server  
---------server.py  
-----src (has all my react code)  
-----www  
---------static (has css file)  
---------index.html  
-----package.json  
-----webpack.config.js

Answer 1

您的python Flask服务器未找到该文件，因为在此示例中，bundle.js需要通过运行webpack来显式生成，并且看来您根本还没有运行命令来生成它。

在Flask服务器能够为您的bundle.js服务之前，bundle.js必须首先通过运行Webpack并通过与您在答案中发布的命令类似的命令来构建和编译index.js。

在您的目录下，我还没有看到bundle.js与您在webpack配置中引用的内容相匹配，因此我不清楚您是否需要运行webpack来生成{ {1}}。

关于另一点，我猜想当您运行Express服务器时，您正在使用一个启动脚本，该脚本在此过程中运行了Webpack构建，因此这就是Express服务器找到bundle.js的原因。答案可能在package.json的脚本部分。

Answer 2

所以我做了一些阅读，我找到了一个有效的答案，但我不太明白为什么有必要。一旦我将这一行输入控制台：

webpack -p --progress --config webpack.config.js

一切都按照应有的方式运作。

我在Flask上托管应用程序时找不到bundle.js（404）

2 个答案: