在将Express / Webpack / React应用程序部署到Heroku后，如何修复“ bundle.js 404（未找到）”？

Question

在我的应用程序控制台中

tile

不知道怎么了。 这在localhost上工作正常。 有人可以帮忙吗？ ：（

（这不是使用create-react-app构建的）

也许我丢失了应该添加到package.json中的脚本中的内容，或者文件路径不正确？

我试图检查文件路径，但是对于可能出现的问题我感到非常困惑。

heroku日志：

GET ...herokuapp.com/bundle.js 404 (Not Found)

package.json

2019-01-31T02:13:39.026139+00:00 app[web.1]: > Glacial@1.0.0 start /app
2019-01-31T02:13:39.026141+00:00 app[web.1]: > npm run build && node ./backend/server.js
2019-01-31T02:13:39.026143+00:00 app[web.1]:
2019-01-31T02:13:39.415395+00:00 app[web.1]:
2019-01-31T02:13:39.415438+00:00 app[web.1]: > Glacial@1.0.0 build /app
2019-01-31T02:13:39.415441+00:00 app[web.1]: > webpack --mode production
2019-01-31T02:13:39.415442+00:00 app[web.1]:
2019-01-31T02:13:39.534502+00:00 app[web.1]: One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
2019-01-31T02:13:39.534507+00:00 app[web.1]: - webpack-cli (https://github.com/webpack/webpack-cli)
2019-01-31T02:13:39.534510+00:00 app[web.1]: The original webpack full-featured CLI.
2019-01-31T02:13:39.536465+00:00 app[web.1]: We will use "npm" to install the CLI via "npm install -D".
2019-01-31T02:13:40.938532+00:00 heroku[router]: at=info method=GET path="/bundle.js" dyno=web.1 connect=1ms service=3ms status=404 bytes=392 protocol=https

server.js

{
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "npm run build && node ./backend/server.js"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "nodemon": "^1.18.9",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.2.1"
  }
}

用于server.js的中间件

//Express
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const port = process.env.PORT || 3000;

//Files
const expressMiddleware = require('./middleware/index.js');

//Middleware
expressMiddleware(app);

// Frontend Route
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend/index.html'));
});

//Server
app.listen(port, () => console.log('Server running on localhost 3000!'));

//Export App
module.exports = app;

webpack.config.js

const express = require('express');
const bodyparser = require('body-parser');
const path = require('path');

const expressMiddleware = (app) => {
    app.use(bodyparser.urlencoded({ extended: false }));
    app.use(bodyparser.json());
    app.use(express.static(path.join(__dirname, '../../frontend/public')));
}

module.exports = expressMiddleware;

index.html

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

module.exports = {
  entry: "./frontend/app.jsx",
  output: {
    path: path.join(__dirname,'/frontend/public'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude:/node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/env', '@babel/preset-react']
        }
      },
       {
        test: /\.css$/,
        loader: 'style-loader'
      },
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file'
      }
    ]
  },
  devtool: 'source-maps',
  resolve: {
    extensions: [".js", ".jsx", ".css"]
  },
  watch: true
};

文件结构图