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

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.

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 .

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

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
}

Bekerja untuk saya seperti ini

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

},

Bekerja pada aplikasi kerusuhan

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

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.

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' },
        ]
    },
});

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.

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

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

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
}