这是我第一次配置 webpack，出现了一些问题。当 url 驱动到/people/1 时，会发生错误: GET http://localhost:8080/people/main.bundle.js net::ERR_ABORTED 404 (Not Found)，但如果 url 中是/people，则它可以工作。组件“App”被“BrowserRouter”包装 索引.html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Library of ossus</title>
</head>
<body>
<div id='root'></div>
<script src='./index.js'></script>
</body>
</html>
应用程序.js:
import React from 'react';
import { Redirect, Route, Switch } from 'react-router';
import './App.scss';
import Content from './components/Content/Content.jsx';
const App = () => {
return (
<Switch>
<Route path='/people/:personId?' render={() => <Content />} />
<Route path='/planets/:planetId?' render={() => <Content />} />
<Route path='/starships/:starshipId?' render={() => <Content />} />
<Route path='/' render={() => <Redirect to='/people' />} />
<Route path='*' render={() => <Redirect to='/people' />} />
</Switch>
);
};
export default App;
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devServer: {
historyApiFallback: true,
static: {
directory: path.join(__dirname, './dist'),
},
contentBase: path.resolve(__dirname, './dist'),
open: true,
compress: true,
hot: true,
port: 8080,
},
entry: ['regenerator-runtime/runtime.js', './src/index.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
],
}
};
最佳答案
在你的 webpack 配置中，你使用两者:
static: {
directory: path.join(__dirname, './dist'),
},
contentBase: path.resolve(__dirname, './dist'),
在 webpack 5 中，他们将 contentBase 更改为静态。删除 contentBase 并尝试以下操作:
static: path.resolve(__dirname, './dist')
关于javascript - net::ERR_ABORTED 404(未找到)react-router-dom，webpack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70034619/