Question

我正在尝试使用React.js前端运行Spring-Boot应用程序。所有后端代码都可以正常工作。我们正在使用webpack来编译所有的react组件，并且bundle.js文件正在被很好地创建。但是，当提供index.html文件时，它找不到bundle.js文件。我们正在通过Heroku托管服务器。

index.html

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>Philosofound</title>
    <link rel="stylesheet" href="/main.css" />
</head>
<body>

    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script th:src="@{/static/bundle.js}"></script>
</body>
</html>

webpack.config.js

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

module.exports = {
    entry: './src/main/js/index.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, 'src/main/resources/static')
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            "React": "react"
        })
    ]
};

home controller.java文件

@Controller
public class HomeController {

    @RequestMapping(value = "/")
    public String index() {
        return "index";
    }

}

当我们编译和部署应用程序时，网站将返回

GET http://philosofound.com/static/bundle.js net::ERR_ABORTED 404

理想情况下，该应用程序实际上将在站点启动时使用React组件。非常感谢您提供有关如何解决此问题的建议。网站网址为http://philosofound.com

无法通过webpack和spring-boot显示React组件

0 个答案: