Как сообщить серверу webpack dev для обслуживания index.html для любого маршрута

Ответ 1

Я нашел самое простое решение, чтобы включить небольшой конфиг:

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  }

Я нашел это, посетив: PUSHSTATE WITH WEBPACK-DEV-SERVER.

Ответ 2

Параметр historyApiFallback в официальной документации для webpack-dev-server четко объясняет, как этого добиться, используя

historyApiFallback: true

который просто возвращается к index.html, когда маршрут не найден

или

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}

Ответ 3

Работает для меня вот так

devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true

},

Работа с приложением для беспорядков

Ответ 4

Моя ситуация была немного иной, так как я использую angular CLI с webpack и опцией "извлечения" после запуска ng eject. Я изменил изгнанный npm script для "npm start" в package.json, чтобы передать флаг -history-api-fallback

"start": "webpack-dev-server --port = 4200 - история-api-fallback"

"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200 --history-api-fallback",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"startold": "webpack-dev-server --inline --progress --port 8080",
"testold": "karma start",
"buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"},

Ответ 5

Добавление общедоступного пути в конфигурацию помогает webpack понять настоящий root (/), даже когда вы находитесь в подпроцессах, например. /article/uuid

Поэтому измените конфигурацию вашего веб-пакета и добавьте следующее:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Без publicPath ресурсы могут не загружаться должным образом, только index.html.

Протестировано на Webpack 4.6

Большая часть конфига (просто для лучшей картинки):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}

Ответ 6

Если вы решите использовать webpack-dev-server, вы не должны использовать его для обслуживания всего приложения React. Вы должны использовать его для обслуживания вашего файла bundle.js а также статических зависимостей. В этом случае вам потребуется запустить 2 сервера, один для точек входа Node.js, которые фактически будут обрабатывать маршруты и обслуживать HTML, а другой - для пакета и статических ресурсов.

Если вы действительно хотите использовать один сервер, вы должны прекратить использование webpack-dev-server и начать использовать webpack-dev-middleware на вашем сервере приложений. Он будет обрабатывать пакеты "на лету" (я думаю, что он поддерживает кэширование и bundle.js замену модулей) и гарантирует, что ваши вызовы в bundle.js всегда актуальны.

Ответ 7

Вы можете включить historyApiFallback для обслуживания index.html вместо ошибки 404, если в этом месте не найден другой ресурс.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: true,
});

Если вы хотите обслуживать разные файлы для разных URI, вы можете добавить основные правила перезаписи к этой опции. index.html все равно будет обслуживаться для других путей.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: {
        rewrites: [
            { from: /^\/page1/, to: '/page1.html' },
            { from: /^\/page2/, to: '/page2.html' },
            { from: /^\/page3/, to: '/page3.html' },
        ]
    },
});

Ответ 8

Я знаю, что этот вопрос относится к webpack-dev-server, но для всех, кто использует webpack-serve 2.0. с веб-пакетом 4.16.5; webpack-serve позволяет добавлять дополнения. Вам необходимо создать serve.config.js:

const serve = require('webpack-serve');
const argv = {};
const config = require('./webpack.config.js');

const history = require('connect-history-api-fallback');
const convert = require('koa-connect');

serve(argv, { config }).then((result) => {
  server.on('listening', ({ server, options }) => {
      options.add: (app, middleware, options) => {

          // HistoryApiFallback
          const historyOptions = {
              // ... configure options
          };

          app.use(convert(history(historyOptions)));
      }
  });
});

Ссылка

Вам нужно будет изменить скрипт dev с webpack-serve на node serve.config.js.

Ответ 9

Для меня у меня были точки "." в моем пути, например, /orgs.csv поэтому я должен был поместить это в мой веб-пакет Confg.

devServer: {
  historyApiFallback: {
    disableDotRule: true,
  },
},