Reactjs 在Flask上托管应用程序时未找到bundle.js（404）_Reactjs_Flask_Webpack

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

reactjs flask webpack

Reactjs 在Flask上托管应用程序时未找到bundle.js（404）,reactjs,flask,webpack,Reactjs,Flask,Webpack,我正在尝试在我设置的一个简单的Flask服务器上运行基于react的web应用程序。我使用webpack捆绑所有前端软件包。但是，我发现在运行服务器时，没有找到创建的javascript文件（bundle.js）我的网页包配置（webpack.config.js）是：其中bundle.js被输出到/www/目录在/www/目录中还有我的index.html文件： <html> <head> <link rel="stylesheet"

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

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

其中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>

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

当我运行服务器时（使用pythonserver.py）。localhost:5000显示“此处”，但随后抛出：

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

所以我又读了一些书，找到了一个有效的答案，但我不太明白为什么有必要这么做。我在控制台中键入这一行后：

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

一切都正常运转

PythonFlask服务器找不到该文件，因为在本例中，

bundle.js

需要通过运行webpack显式生成文件&似乎您还没有运行生成该文件的命令

在Flask服务器能够为您的

bundle.js

服务之前，必须首先通过您在答案中发布的命令运行Webpack来构建和编译

bundle.js

查看您的目录，我还没有看到与您在webpack配置中引用的内容相匹配的

index.js

，因此我不清楚您是否需要在这个阶段运行webpack来生成

bundle.js

你的另一点是，我猜当你运行Express服务器时，你使用的是一个启动脚本，在这个过程中运行了一个网页包构建，这就是为什么你的Express服务器会找到一个

bundle.js

。这个问题的答案可能在

package.json

的脚本部分，本文将为您提供一个想法，即创建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

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