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

webpack-dev-server

Question

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.

Answer 1

Agregar una ruta pública a la configuración ayuda a webpack a comprender la raíz 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 los recursos publicPath , es posible que no se carguen 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
}

Answer 2

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 .

Answer 3

Funciona para mi asi

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

},

Trabajando en la aplicación antidisturbios

Answer 4

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

Answer 5

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

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

Answer 6

Puede habilitar historyApiFallback para servir el index.html lugar 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. index.html aún se servirá para otras rutas.

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

Answer 7

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)));
      }
  });
});

Reference

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

Answer 8

Si elige usar webpack-dev-server , no debe usarlo para servir toda su aplicación React. Debe usarlo para servir su archivo bundle.js , 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-server y comenzar a usar el webpack-dev-middleware dentro de su servidor de aplicaciones. bundle.js paquetes "sobre la marcha" (creo que admite el almacenamiento en caché y los reemplazos de módulos bundle.js ) y se asegurará de que sus llamadas a bundle.js estén siempre actualizadas.

Answer 9

historyApiFallback 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/''
}