Как разрешить для webpack-dev-server разрешать точки входа из реагирующего маршрутизатора

Вы должны установить historyApiFallback of WebpackDevServer как истинный для этого. Вот небольшой пример (настройка для ваших целей):

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');


var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
}).listen(port, ip, function (err) {
    if(err) {
        return console.log(err);
    }

    console.log('Listening at ' + ip + ':' + port);
});

Для всех, кто еще может найти этот ответ. Я собрал простой прокси-прокси, который достигает этого без особых хлопот, и конфигурация переходит в файл webpack.config.js

Я уверен, что есть гораздо более элегантные способы тестирования локального контента с использованием регулярного выражения, но это работает для моих нужд.

devServer: {
  proxy: { 
    '/**': {  //catch all requests
      target: '/index.html',  //default target
      secure: false,
      bypass: function(req, res, opt){
        //your custom code to check for any exceptions
        //console.log('bypass check', {req: req, res:res, opt: opt});
        if(req.path.indexOf('/img/') !== -1 || req.path.indexOf('/public/') !== -1){
          return '/'
        }

        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index.html';
        }
      }
    }
  }
} 

Если вы используете webpack-dev-сервер с использованием CLI, вы можете настроить его через webpack.config.js, передавая объект devServer:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js"
  },
  devServer: {
    historyApiFallback: true
  }
}

Это будет перенаправлять на index.html каждый раз, когда встречается 404.

ПРИМЕЧАНИЕ. Если вы используете publicPath, вам также нужно передать его на devServer:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js",
    publicPath: "admin/dashboard"
  },
  devServer: {
    historyApiFallback: {
      index: "admin/dashboard"
    }
  }
}

Вы можете убедиться, что все настроено правильно, просмотрев первые несколько строк вывода (часть с "404s будет отбрасываться до: путь" ).

Я хотел бы добавить ответ на случай, когда вы запускаете изоморфное приложение (т.е. рендеринг на стороне сервера).

В этом случае вы, вероятно, также захотите автоматически перезагрузить сервер при изменении одной из ваших компонентов React. Вы делаете это с помощью пакета piping. Все, что вам нужно сделать, это установить его и добавить require("piping")({hook: true}) где-то в начале сервера server.js. Это. Сервер будет перезагружен после изменения любого используемого им компонента.

Это еще одна проблема: если вы запустите сервер webpack из того же процесса, что и ваш экспресс-сервер (как в принятом ответе выше), сервер webpack также перезагрузится и будет перекомпилировать ваш пакет каждый раз. Чтобы этого избежать, вы должны запускать главный сервер и сервер веб-пакетов в разных процессах, чтобы трубопроводы перезапускали только ваш экспресс-сервер и не касались веб-пакета. Вы можете сделать это с помощью пакета concurrently. Вы можете найти пример этого в react-isomorphic-starterkit. В пакете .json он имеет:

"scripts": {
    ...
    "watch": "node ./node_modules/concurrently/src/main.js --kill-others 'npm run watch-client' 'npm run start'"
  },

который запускает оба сервера одновременно, но в отдельных процессах.

Может быть не во всех случаях, но кажется, что опция publicPath: '/' в devServer - это самое простое решение для исправления проблемы с глубокими маршрутами, см.: https://github.com/ReactTraining/react-router/issues/676

historyApiFallback также может быть объектом, а не булевым, содержащим маршруты.

historyApiFallback: navData && {
  rewrites: [
      { from: /route-1-regex/, to: 'route-1-example.html' }
  ]
}

Это сработало для меня: просто добавьте сначала webpack middlewares и app.get('*'... index.html resolver позже,

поэтому выражение сначала проверит, соответствует ли запрос одному из маршрутов, предоставляемых webpack (например: /dist/bundle.js или /__webpack_hmr_), а если нет, то он переместится в index.html с помощью распознавателя *.

т

app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
}))
app.use(require('webpack-hot-middleware')(compiler))
app.get('*', function(req, res) {
  sendSomeHtml(res)
})