当我在 Flask 上托管应用程序时找不到 bundle.js (404)答案

【问题标题】：bundle.js not found (404) when I host an app on Flask当我在 Flask 上托管应用程序时找不到 bundle.js (404)
【发布时间】：2017-11-02 22:18:06
【问题描述】：

我正在尝试在我设置的简单 Flask 服务器上运行基于反应的网络应用程序。我使用 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

【问题讨论】：

github.com/webpack/webpack-dev-server/issues/645，这篇文章给你一个思路

标签： reactjs flask webpack

【解决方案1】：

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

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

查看您的目录，我还没有看到与您在 webpack 配置中引用的内容相匹配的 index.js，所以我不清楚您是否需要运行 webpack 才能生成 bundle.js在这个阶段。

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

【讨论】：

【解决方案2】：

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

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

一切正常。

【讨论】：

这只是简单的创建bundle.js文件。