Webpack 加载资源失败。捆绑.js 404答案

【问题标题】：Webpack failed to load resource. bundle.js 404Webpack 加载资源失败。捆绑.js 404
【发布时间】：2019-02-25 03:18:13
【问题描述】：

一点背景。我一直在关注本教程：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”并收到 404 错误，因为它无法找到 bundle.js。它查找的 url 路径是 https://www.mywebsitehere.com/public/bundle.js。

我相信我已经将烧瓶设置为在我的 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)

我知道这是很多代码，但是经过大量的研究和故障排除后，我仍然保持原状。任何帮助或指导将不胜感激。

谢谢！

【问题讨论】：

标签： javascript python reactjs flask webpack

【解决方案1】：

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

【讨论】：

所以 webpack.config.js 与 ~/web-app/templates/static 中的 index.html 文件位于同一目录中。我已将 index.html 中的 src 更改为 dist/bundle.js ，但仍然出现相同的错误。有什么我想念的吗？
听起来你的 webpack 配置和 index.html 现在指向同一个文件位置，所以这可能是你的 Flask 应用程序中的路由问题。
我认为你是对的。我将分别研究路由。我已将您的答案标记为正确，感谢您的帮助！
没问题，我希望你能找到解决方案，对不起，我无法为 Flask 提供更多帮助！

【解决方案2】：

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

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

【讨论】：