Bagaimana cara memberitahu server dev webpack untuk melayani index.html untuk rute apa pun


148

React router memungkinkan aplikasi bereaksi untuk menangani /arbitrary/route. Agar ini berfungsi, saya perlu server saya untuk mengirim aplikasi Bereaksi pada rute yang cocok.

Tetapi server dev webpack tidak menangani titik akhir yang sewenang-wenang.

Ada solusi di sini menggunakan server ekspres tambahan. Cara mengizinkan webpack-dev-server untuk mengizinkan titik masuk dari react-router

Tapi saya tidak ingin menjalankan server ekspres lain untuk memungkinkan pencocokan rute. Saya hanya ingin memberi tahu server dev webpack untuk mencocokkan url apa pun dan mengirimkan saya aplikasi reaksi saya. silahkan.



Jawaban:


169

Saya menemukan solusi termudah untuk menyertakan konfigurasi kecil:

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

Saya menemukan ini dengan mengunjungi: PUSHSTATE WITH WEBPACK-DEV-SERVER .


18
Anda juga dapat menggunakannya sebagai opsi CLI:--history-api-fallback
VonD

7
Saya harus menggunakan sesuatu seperti ini dengan versi yang lebih baru 2.devServer: { port: 3000, historyApiFallback: true },
Adrian Moisa

1
Memang Anda harus menggunakan kedua opsi cli "--history-api-fallback" dan pada konfigurasi server webpack Anda atur resolusi ke file indeks Anda seperti dijelaskan pada jawaban di atas.
Jc Figueroa

86

Opsi historyApiFallback pada dokumentasi resmi untuk webpack-dev-server menjelaskan dengan jelas bagaimana Anda dapat mencapai keduanya dengan menggunakan

historyApiFallback: true

yang hanya jatuh kembali ke index.html ketika rute tidak ditemukan

atau

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


Tetapi sebenarnya webpack-dev-server sedang dalam pemeliharaan sekarang. Penggantinya adalah github.com/webpack-contrib/… , yang mendukunghistoryApiFallback
jacob

3
Bagi siapa pun yang membaca ini di 2019, menurut github.com/webpack-contrib/webpack-serve#webpack-serve webpack-dev-server adalah penerusnya webpack-serve, bukan sebaliknya seperti yang disebutkan dalam stackoverflow.com/questions/31945763/… .
ur5us

komentar ur5us sebenarnya salah. webpack-serve adalah penerus yang direncanakan untuk webpack-dev-server. Saya penulis webpack-serve dan mantan pengelola webpack-dev-server. ketika saya mengambil cuti, anggota org yang pahit tidak lagi melayani webpack, dan sejak itu saya merilisnya di bawah garpu.
shellscape

23

Menambahkan jalur publik ke config membantu webpack untuk memahami root sebenarnya ( /) bahkan ketika Anda sedang dalam subroutes, mis./article/uuid

Jadi modifikasi konfigurasi webpack Anda dan tambahkan yang berikut:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Tanpa publicPathsumber daya mungkin tidak dimuat dengan benar, hanya index.html.

Diuji di Webpack 4.6

Bagian konfigurasi yang lebih besar (hanya untuk mendapatkan gambar yang lebih baik):

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
}

Wow ini juga bekerja untuk saya! The historyApiFallbacktrick hanya bekerja untuk bagian terakhir dari URL untuk beberapa alasan. /testakan bekerja tetapi /test/testakan memberi 404.
Alex. P.

Selain historyApiFallback: {index: '/'} atau historyApiFallback: true(keduanya bekerja untuk saya), pengaturan publicPathjuga penting dalam kasus saya (Router 5.2).
Marcus Junius Brutus

17

Bekerja untuk saya seperti ini

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

},

Bekerja pada aplikasi kerusuhan


14

Situasi saya sedikit berbeda, karena saya menggunakan CLI sudut dengan webpack dan opsi 'eject' setelah menjalankan perintah e eject . Saya memodifikasi skrip npm yang dikeluarkan untuk 'npm start' di package.json untuk meneruskan flag --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"},

6

Jika Anda memilih untuk menggunakan webpack-dev-server, Anda tidak boleh menggunakannya untuk melayani seluruh aplikasi Bereaksi Anda. Anda harus menggunakannya untuk melayani bundle.jsfile Anda serta dependensi statis. Dalam hal ini, Anda harus memulai 2 server, satu untuk titik masuk Node.js, yang sebenarnya akan memproses rute dan melayani HTML, dan satu lagi untuk bundel dan sumber daya statis.

Jika Anda benar-benar menginginkan satu server, Anda harus berhenti menggunakan webpack-dev-serverdan mulai menggunakan webpack-dev-middleware dalam server aplikasi Anda. Ini akan memproses bundel "on the fly" (saya pikir ini mendukung caching dan penggantian modul panas) dan memastikan panggilan Anda bundle.jsselalu up to date.


2
Saya menggunakan webpack-dev-server hanya untuk pengembangan peta sumber reload panas dll. Kalau tidak, saya memiliki situs web statis di mana saya dapat meng-host file dari mana saja.
eguneys

3

Anda dapat mengaktifkan historyApiFallbackuntuk melayani index.htmlalih - alih kesalahan 404 saat tidak ada sumber daya lain ditemukan di lokasi ini.

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

Jika Anda ingin menyajikan file yang berbeda untuk URI yang berbeda, Anda dapat menambahkan aturan penulisan ulang dasar untuk opsi ini. The index.htmlmasih akan disajikan untuk jalur lainnya.

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

2

Saya tahu pertanyaan ini untuk webpack-dev-server, tetapi bagi siapa saja yang menggunakan webpack-serve 2.0. dengan webpack 4.16.5 ; webpack-serve memungkinkan add-on. Anda harus membuat 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)));
      }
  });
});

Referensi

Anda harus mengubah skrip dev dari webpack-servemenjadi node serve.config.js.


2

Bagi saya, saya punya titik "." di jalur saya misalnya /orgs.csvjadi saya harus meletakkan ini di conf webpack saya.

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

0

Saya setuju dengan sebagian besar jawaban yang ada.

Satu hal kunci yang ingin saya sebutkan adalah jika Anda mengalami masalah saat memuat ulang halaman secara manual di jalur yang lebih dalam di mana ia menyimpan semua kecuali bagian terakhir dari jalur dan mengupas nama jsfile bundel Anda, Anda mungkin memerlukan pengaturan tambahan (khususnyapublicPath pengaturan ).

Misalnya, jika saya memiliki path /foo/bardan file bundler saya dipanggil bundle.js. Ketika saya mencoba untuk me-refresh halaman secara manual, saya mendapatkan pepatah 404 /foo/bundle.jstidak dapat ditemukan. Menariknya jika Anda mencoba memuat ulang dari jalan/foo Anda tidak melihat masalah (ini karena fallback menanganinya).

Coba gunakan di bawah ini bersama dengan webpackkonfigurasi Anda yang ada untuk memperbaiki masalah. output.publicPathadalah kuncinya!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.