Question

当我尝试在前端连接React JS和在后端连接Java Spring时，生成的文件bundle.js出现问题。

我的错误： Error

我正在更改index.html和Webpack中的路径，但是每次都行不通。一次，当index.html中的src为时它起作用了，这就是为什么我使用此版本的 index.html 创建帖子，但是React没有呈现新视图的原因。我尝试 mvnw清理，但是之后，该项目找不到“ bundle.js ” 要构建项目，我正在使用 mvnw spring-boot：run 。

这是我的 index.html 页面：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div>
    Hello World!
</div>

<p>
    <input type="button" value="About Me" onclick="window.location.href='/aboutMe' "/>
</p>

<div id="react"></div>
<script src="./../../../../built/bundle.js"></script>

</body>
</html>

这是我的 webpack.config.js ：

const path = require('path');

module.exports = {
  entry: './frontend/App.jsx',
  devtool: 'sourcemaps',
  cache: true,
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path:__dirname,
    filename: './built/bundle.js',
  },
  module: {
    rules: [
      {
        test: path.join(__dirname, '.'),
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        }],
      },
    ],
  },
};

我的 App.jsx 文件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {

    render() {
        return (
            <div>
                <h1>Hello from React</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('react'),
);

我的项目结构：

Project Structure

/built/bundle.js net :: ERR_ABORTED 404（未找到）

0 个答案: