Я создаю приложение 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
}
};
В Документация по веб-пакету об 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, пути моего реального публичного актива, в какой-то степени работает. Но решение приходит только в том случае, если вы используете абсолютный путь при загрузке ресурсов.





Вам нужно указать publicPath в объекте output следующим образом:
output: {
filename: 'bundle.js',
path: __dirname + '/docs/dist',
publicPath: '/'
},
Вы можете прочитать документ для получения дополнительной информации.
Почему? Мой / вообще не публичный. Его нельзя подавать. Кроме того, я сделал это, и ошибка продолжается. Не могли бы вы уточнить это? Я люблю решения, но еще больше люблю их понимать.
Добавьте
publicPath='/'в конфигурацию веб-пакета.