Webpack не удалось загрузить ресурс.bundle.js 404 - PullRequest
0 голосов
/ 25 февраля 2019

Немного фона.Я следовал этому уроку: 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)

Я знаю, что это много кода, но после большого количества исследований и устранения неисправностей, я остаюсь на первом месте.Любая помощь или руководство будет высоко ценится.

Спасибо!

1 Ответ

0 голосов
/ 25 февраля 2019

В вашем index.html script src указывает на public/bundle.js, но вывод вашей конфигурации webpack - (dir containing webpack config)/dist/bundle.js.Структура вашей папки не показывает, где находится конфигурация webpack, но вы хотите убедиться, что выходные данные конфигурации и атрибут src html script указывают на один и тот же путь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...