Як сказати веб-пакету розробника сервера для обслуговування index.html для будь-якого маршруту

Маршрутизатор React дозволяє реагувати додаткам для обробки /arbitrary/route. Для того, щоб це працювало, мені потрібен мій сервер, щоб надіслати додаток React будь-яким зібраним маршрутом.

Але сервер розробників webpack не обробляє довільних кінцевих точок.

Тут є рішення за допомогою додаткового експрес-сервера. Як дозволити веб-пакету-dev-серверу дозволити вхідні точки від react-router

Але я не хочу запускати інший експрес-сервер, щоб дозволити відповідність маршруту. Я просто хочу сказати, що веб-сервер Dev-сервера відповідає будь-якому URL-адресу, і надіслати мені свою реакцію. будь ласка.

Я знайшов найпростіше рішення включити невеликий конфігурацію:

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

Я виявив це, відвідавши: PUSHSTATE With WEBPACK-DEV-SERVER .

Параметр historyApiFallback в офіційній документації для webpack-dev-сервера чітко пояснює, як можна досягти будь-якого, використовуючи

historyApiFallback: true

який просто повертається до index.html, коли маршрут не знайдено

або

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

Додавання загальнодоступного конфігурації допомагає webpack зрозуміти реальний корінь (/ ), навіть коли ви знаходитесь в підгрупах, наприклад./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
}

Для мене працює так

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

},

Працює над програмою "бунт"

Моя ситуація була дещо іншою, оскільки я використовую кутовий CLI з webpack та опцію 'eject' після запуску команди ng eject . Я змінив викинутий сценарій npm для 'npm start' у package.json, щоб передати його у прапор --history-api-backback

"start": "webpack-dev-server --port = 4200 --history-api-backback "

"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"},

Якщо ви вирішили використовувати webpack-dev-server, ви не повинні використовувати його для обслуговування всього вашого додатка React. Ви повинні використовувати його для обслуговування вашого bundle.jsфайлу, а також статичних залежностей. У цьому випадку вам доведеться запустити 2 сервери, один для точок входу Node.js, які насправді збираються обробляти маршрути та обслуговувати HTML, а інший - для зв’язку та статичних ресурсів.

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

Ви можете ввімкнути 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' },
        ]
    },
});

Я знаю, що це питання стосується webpack-dev-сервера, але для тих, хто використовує 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)));
      }
  });
});

Довідково

Вам потрібно буде змінити сценарій розробника з webpack-serveна node serve.config.js.

Для мене були крапки "." на моєму шляху, наприклад, /orgs.csvтому мені довелося помістити це в конфігурацію веб-упаковки.

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

Я згоден з більшістю існуючих відповідей.

Я хотів би зазначити одне головне, якщо ви стикаєтеся з проблемами під час перезавантаження сторінок вручну глибшими шляхами, де він зберігає весь, але останній розділ шляху, і дотримується імені вашого jsфайлу пакету, можливо, вам потрібні додаткові налаштування (зокремаpublicPath налаштування ).

Наприклад, якщо у мене є шлях /foo/barі викликається мій файл постачальника bundle.js. Коли я намагаюся оновити сторінку вручну, я отримую вислів 404, який /foo/bundle.jsне можна знайти. Цікаво, якщо ви спробуєте перезавантажити шлях/foo ви не бачите жодних проблем (це тому, що резервна робота обробляє його).

Спробуйте скористатися наведеним нижче разом із наявним webpackконфігурацією, щоб виправити проблему. output.publicPathє ключовим твором!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}