Webpack geliştirici sunucusuna herhangi bir yol için index.html'yi sunması nasıl söylenir

React yönlendiricisi, tepki uygulamalarının işlemesini sağlar /arbitrary/route. Bunun çalışması için sunucumun React uygulamasını herhangi bir eşleşen rotaya göndermesine ihtiyacım var.

Ancak web paketi geliştirici sunucusu keyfi uç noktaları işlemez.

Ek ekspres sunucu kullanarak burada bir çözüm var. Webpack-dev-server'ın react-router'dan giriş noktalarına izin vermesine nasıl izin verilir

Ancak rota eşleştirmeye izin vermek için başka bir ekspres sunucuyu çalıştırmak istemiyorum. Webpack dev sunucusuna herhangi bir url ile eşleşmesini söylemek ve bana react uygulamamı göndermek istiyorum. Lütfen.

Küçük bir yapılandırma eklemek için en kolay çözümü buldum:

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

Bunu ziyaret ederek buldum: WEBPACK-DEV-SERVER İLE PUSHSTATE .

webpack -dev-server için resmi belgelerdeki geçmişApiFallback seçeneği,her ikisini de kullanarak nasıl başarabileceğinizi açık bir şekilde açıklar

historyApiFallback: true

yol bulunamadığında index.html'ye geri döner

veya

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

Yapılandırmaya genel yol eklemek /, alt yordamlarda olsanız bile web paketinin gerçek kökü ( ) anlamasına yardımcı olur , örn./article/uuid

Bu nedenle, web paketi yapılandırmanızı değiştirin ve aşağıdakileri ekleyin:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

publicPathKaynaklar olmadan düzgün yüklenmeyebilir, yalnızca index.html.

Webpack üzerinde test edildi 4.6

Yapılandırmanın daha büyük kısmı (sadece daha iyi bir resim elde etmek için):

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
}

Benim için böyle çalışıyor

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

},

Riot uygulaması üzerinde çalışmak

Açısal CLI'yi webpack ile ve ng çıkarma komutunu çalıştırdıktan sonra 'çıkar' seçeneğini kullandığım için durumum biraz farklıydı . --History-api-fallback bayrağını geçirmek için package.json'daki 'npm start' için çıkarılan npm komut dosyasını değiştirdim

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

Kullanmayı seçerseniz webpack-dev-server, tüm React uygulamanıza hizmet vermek için kullanmamalısınız. bundle.jsDosyanıza ve statik bağımlılıklara hizmet etmek için kullanmalısınız . Bu durumda, biri rotaları işleyecek ve HTML'yi sunacak olan Node.js giriş noktaları için ve diğeri paket ve statik kaynaklar için olmak üzere 2 sunucu başlatmanız gerekir.

Gerçekten tek bir sunucu istiyorsanız , uygulama sunucunuzdaki webpack-dev-middleware'iwebpack-dev-server kullanmayı bırakmalı ve kullanmaya başlamalısınız . Paketleri "anında" işleyecek (önbelleğe alma ve etkin modül değiştirmelerini desteklediğini düşünüyorum) ve çağrılarınızın bundle.jsher zaman güncel olmasını sağlar.

Etkinleştirebilir historyApiFallbackhizmet etmek index.htmlbaşka hiçbir kaynak bu konumda bulunmuştur zaman bir 404 hata yerine.

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

Farklı URI'ler için farklı dosyalar sunmak istiyorsanız, bu seçeneğe temel yeniden yazma kuralları ekleyebilirsiniz. index.htmlYine de diğer yollar için servis edilecektir.

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

Benim için noktalarım vardı "." yolumda örneğin /orgs.csvbu yüzden bunu web paketimde konfg.

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

Bu sorunun webpack-dev-server için olduğunu biliyorum, ancak webpack-serve 2.0 kullanan herkes için . ile WebPack 4.16.5 ; webpack-hizmet eklenti ons.You'll oluşturulması ihtiyacını da verir 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)));
      }
  });
});

Referans

Dev komut dosyasını olarak webpack-serveolarak değiştirmeniz gerekecek node serve.config.js.

Mevcut cevapların çoğuna katılıyorum.

Bahsetmek istediğim önemli bir şey , daha derin yollardaki sayfaları manuel olarak yeniden yüklerken , yolun son bölümü hariç tümünü sakladığı ve paket dosyanızın adını takip ettiği sorunlara rastlarsanız, muhtemelen ekstra bir ayara (özellikle de ayar) ihtiyacınız olacaktır. ).jspublicPath

Örneğin, bir yolum varsa /foo/barve paketleyici dosyam çağrılırsa bundle.js. Sayfayı manuel olarak yenilemeye çalıştığımda bir 404 ifadesi /foo/bundle.jsbulunamıyor. İlginç bir şekilde, yoldan yeniden yüklemeyi denerseniz, /foohiçbir sorun görmezsiniz (bunun nedeni, geri dönüşün sorunu çözmesidir).

webpackSorunu çözmek için aşağıdakileri mevcut yapılandırmanızla birlikte kullanmayı deneyin . output.publicPathanahtar parça!

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