Cómo decirle al servidor de desarrollo webpack que sirva index.html para cualquier ruta

React router permite que las aplicaciones reaccionen para manejar /arbitrary/route. Para que esto funcione, necesito que mi servidor envíe la aplicación React en cualquier ruta coincidente.

Pero el servidor de desarrollo webpack no maneja puntos finales arbitrarios.

Aquí hay una solución que usa un servidor express adicional. Cómo permitir que webpack-dev-server permita puntos de entrada desde react-router

Pero no quiero encender otro servidor express para permitir la coincidencia de rutas. Solo quiero decirle al servidor de desarrollo webpack que coincida con cualquier url y enviarme mi aplicación de reacción. Por favor.

Encontré la solución más fácil para incluir una pequeña configuración:

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

Encontré esto visitando: PUSHSTATE WITH WEBPACK-DEV-SERVER .

La opción historyApiFallback en la documentación oficial para webpack-dev-server explica claramente cómo puede lograrlo utilizando

historyApiFallback: true

que simplemente vuelve a index.html cuando no se encuentra la ruta

o

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

Agregar una ruta pública a la configuración ayuda a webpack a comprender root real ( /) incluso cuando está en subrutas, por ejemplo./article/uuid

Modifique la configuración de su paquete web y agregue lo siguiente:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Sin publicPathrecursos podría no cargarse correctamente, solo index.html.

Probado en Webpack 4.6

Parte más grande de la configuración (solo para tener una mejor imagen):

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
}

Funciona para mi asi

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

},

Trabajando en la aplicación antidisturbios

Mi situación era un poco diferente, ya que estoy usando la CLI angular con webpack y la opción 'expulsar' después de ejecutar el comando ng eject . Modifiqué el script npm expulsado para 'npm start' en el package.json para pasar el indicador --history-api-fallback

"start": "webpack-dev-server --port = 4200 --history-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"},

Si elige usar webpack-dev-server, no debe usarlo para servir toda su aplicación React. Debe usarlo para servir su bundle.jsarchivo, así como las dependencias estáticas. En este caso, tendría que iniciar 2 servidores, uno para los puntos de entrada de Node.js, que realmente van a procesar rutas y servir el HTML, y otro para el paquete y los recursos estáticos.

Si realmente desea un solo servidor, debe dejar de usar el webpack-dev-servery comenzar a usar el webpack-dev-middleware dentro de su servidor de aplicaciones. Procesará paquetes "sobre la marcha" (creo que admite el almacenamiento en caché y los reemplazos de módulos activos) y se asegurará de que sus llamadas bundle.jsestén siempre actualizadas.

Puede habilitar el historyApiFallbackservicio en index.htmllugar de un error 404 cuando no se ha encontrado ningún otro recurso en esta ubicación.

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

Si desea servir diferentes archivos para diferentes URI, puede agregar reglas básicas de reescritura a esta opción. El index.htmlse seguirá sirviendo para otros caminos.

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

Sé que esta pregunta es para webpack-dev-server, pero para cualquiera que use webpack-serve 2.0. con paquete web 4.16.5 ; webpack-serve permite complementos. Deberá crear 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)));
      }
  });
});

Referencia

Deberá cambiar el script de desarrollo de webpack-servea node serve.config.js.

Para mí tenía puntos "." en mi camino, por ejemplo /orgs.csv, tuve que poner esto en mi webpack confg.

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

Estoy de acuerdo con la mayoría de las respuestas existentes.

Una cosa clave que quería mencionar es que si encuentra problemas al volver a cargar páginas manualmente en rutas más profundas donde mantiene la sección de la ruta excepto la última y agrega el nombre de su jsarchivo de paquete, probablemente necesite una configuración adicional (específicamentepublicPath configuración )

Por ejemplo, si tengo una ruta /foo/bary mi archivo de paquete se llama bundle.js. Cuando intento actualizar manualmente la página, aparece un mensaje 404 que /foo/bundle.jsno se puede encontrar. Curiosamente, si intentas recargar desde la ruta, /foono ves problemas (esto se debe a que el respaldo lo maneja).

Intente usar lo siguiente junto con su webpackconfiguración existente para solucionar el problema. output.publicPathes la pieza clave!

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