Я создаю приложение React без использования create-react-app, но использую webpack для его создания и webpack-dev-server для его обслуживания.
Моя структура каталогов:
myApp
|
|---docs/
| |
| |---dist/
| | |
| | |---bundle.js
| |---index.html
|---src/
|---package.json
|---package-lock.json
|---README.md
|---webpack.config.js
и мой webpack.config.js :
module.exports = {
entry: __dirname + '/src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/docs/dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: [/.css$|.scss$/],
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpg|jpeg|png|jpg|gif)$/,
loader: 'file-loader?limit=10000&name=../assets/images/[name].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000&name=../assets/fonts/[name].[ext]'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
contentBase: './docs',
compress: true,
port: 9000,
historyApiFallback: true
}
};
Документация Webpack для historyApiFallback говорит, что эта конфигурация historyApiFallback: true перенаправит все 404 ответа на index.html.
Бывает, что я использую react-router-dom и у меня есть следующие маршруты:
<BrowserRouter>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/article/:id/show" component={Article} />
<Route path="/donate" component={Donate} />
</Switch>
</BrowserRouter>
Все хорошо с /, /about и /donate,но когда я пробую маршрут /article/<something>/show, я все равно получаю сообщение об ошибке 404. Как показано на рисунке ниже.
Он говорит, что не можетнайдите файл bundle.js.Но, с другой стороны, он не перенаправляет мой маршрут на index.html.Если бы это было так, он нашел бы файл bundle.js, как и на других маршрутах.
Как я могу выполнить эту работу?
РЕДАКТИРОВАТЬ
Установка publicPath в /, как предлагается, не решит проблему.Прежде всего, / - это не путь моего актива.
Установка его /docs/dist, путь моего реального публичного актива, работает в некоторой степени.Но решение приходит только в том случае, если вы используете абсолютный путь при загрузке ресурсов.