web-dev-qa-db-fra.com

Comment indiquer à Webpack dev server de servir index.html pour n’importe quelle route

Le routeur React permet aux applications de réaction de gérer /arbitrary/route. Pour que cela fonctionne, j'ai besoin que mon serveur envoie l'application React sur n'importe quelle route correspondante.

Mais webpack dev server ne gère pas les points finaux arbitraires.

Il existe une solution ici en utilisant un serveur express supplémentaire. Comment autoriser webpack-dev-server à autoriser les points d’entrée de react-router

Mais je ne veux pas lancer un autre serveur express pour permettre la correspondance de route. Je veux juste dire au serveur Webpack dev de correspondre à n'importe quelle URL et de m'envoyer mon application de réaction. S'il vous plaît.

reactjsecmascript-6webpackreact-router
114
eguneys

J'ai trouvé la solution la plus simple pour inclure une petite configuration:

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

J'ai trouvé cela en visitant: PUSHSTATE AVEC WEBPACK-DEV-SERVER .

139
cmfolio

historyApiFallback option sur la documentation officielle de webpack-dev-server explique clairement comment vous pouvez réaliser soit en utilisant

historyApiFallback: true

qui retombe simplement sur index.html quand la route n’est pas trouvée

ou

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

Ma situation était un peu différente, car j'utilise la CLI angular avec Webpack et l'option 'éjecter' après l'exécution de la commande ng eject . J'ai modifié le script npm éjecté pour 'npm start' dans le package.json pour lui attribuer l'indicateur --history-api-fallback

"start": "webpack-dev-server --port = 4200 - historique-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"},
14
Brandon Søren Culley

Fonctionne pour moi comme ça

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

},

Travailler sur l'application anti-émeute

14
user2088033

L'ajout d'un chemin public à config permet à Webpack de comprendre la vraie racine (/) même lorsque vous êtes sur des sous-routes, par exemple. /article/uuid

Alors modifiez votre configuration webpack et ajoutez ce qui suit:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Sans publicPath, les ressources risquent de ne pas être chargées correctement, uniquement index.html.

Testé sur Webpack 4.6

plus grande partie de la configuration (juste pour avoir une meilleure image):

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
}
9
Jurosh

Si vous choisissez d'utiliser webpack-dev-server, vous ne devriez pas l'utiliser pour servir l'intégralité de votre application React. Vous devriez l'utiliser pour servir votre fichier bundle.js ainsi que les dépendances statiques. Dans ce cas, vous devez démarrer 2 serveurs, un pour les points d'entrée Node.js, qui vont réellement traiter les itinéraires et servir le code HTML, et un autre pour les ressources bundle et statiques.

Si vous voulez vraiment un seul serveur, vous devez cesser d'utiliser le webpack-dev-server et commencer à utiliser le webpack-dev-middleware dans votre serveur d'applications. Il traitera les paquets "à la volée" (je pense qu'il prend en charge la mise en cache et le remplacement de modules actifs) et s'assure que vos appels à bundle.js sont toujours à jour.

6
André Pena

Vous pouvez activer historyApiFallback pour servir le index.html au lieu d'une erreur 404 lorsqu'aucune autre ressource n'a été trouvée à cet emplacement.

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

Si vous souhaitez servir différents fichiers pour différents URI, vous pouvez ajouter des règles de réécriture de base à cette option. Le index.html sera toujours servi pour d'autres chemins.

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

Je sais que cette question s'adresse à webpack-dev-server, mais à quiconque utilise webpack-serve 2.0. avec Webpack 4.16.5 ; webpack-serve permet les add-ons. Vous devrez créer 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)));
      }
  });
});

référence

Vous devrez changer le script de développement de webpack-serve à node serve.config.js.

2
shmotam

Pour moi, j'avais des points "." sur mon chemin, par exemple /orgs.csv j'ai donc dû mettre cela dans ma config de webpack.

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