bundel webpack gagal saat dimuat ulang?

Saya pikir masalahnya bukan pada konfigurasi router reaksi tetapi index.html saya tidak dapat mendeteksi skrip saya? Ini kesalahan saya:

Gagal memuat sumber daya: server merespons dengan status 404 (Tidak Ditemukan)

ini kode konfigurasi webpack saya:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.js$/,
      },  
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      }
    ],
  },
  output: {filename: 'app.js', path: '/'},
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true},
  historyApiFallback: {
    index: 'index.html' 
  } 
});

dan indeks.html saya

<!doctype html>
<html lang="en" data-framework="relay">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
    <title>Relay • TodoMVC</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      // Force `fetch` polyfill to workaround Chrome not displaying request body
      // in developer tools for the native `fetch`.
      self.fetch = null;
    </script>
    <script src="http://localhost:4000/webpack-dev-server.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Membantu?


webpack reactjs javascript webpack-dev-server webpack-2
person gpbaculio    schedule 13.08.2017    source sumber
comment
dapatkah Anda menyetel historyApiFallback ke true?   -  person Govind Rai    schedule 13.08.2017
comment
@GovindRai terima kasih, bekerja sekarang   -  person gpbaculio    schedule 13.08.2017
comment
menambahkan penjelasan yang lebih kaya..lihatlah!   -  person Govind Rai    schedule 13.08.2017

Jawaban (1)


arrow_upward
0
arrow_downward

Saat menggunakan API Riwayat HTML5, halaman index.html kemungkinan besar harus disajikan sebagai pengganti respons 404. Aktifkan ini dengan meneruskan:

historyApiFallback: true

Ini sebenarnya adalah konsep yang cukup penting dan harus Anda pahami karena ini adalah komponen utama dari setiap aplikasi halaman tunggal (SPA). Saya juga merasa Anda harus mempelajari lebih dalam file konfigurasi webpack Anda ketika Anda punya kesempatan.

Berikut penjelasan yang lebih baik dan memperkaya tentang opsi historyApiFallback:

Aplikasi Halaman Tunggal (SPA) biasanya hanya menggunakan satu file indeks yang dapat diakses oleh browser web: biasanya index.html. Navigasi dalam aplikasi kemudian umumnya ditangani menggunakan JavaScript dengan bantuan HTML5 History API. Hal ini mengakibatkan masalah ketika pengguna menekan tombol segarkan atau langsung mengakses halaman selain halaman arahan, misalnya. /help atau /help/online saat server web melewati file indeks untuk menemukan file di lokasi ini. Karena aplikasi Anda adalah SPA, server web akan gagal saat mencoba mengambil file dan mengembalikan pesan 404 - Tidak Ditemukan kepada pengguna.

Dua sumber daya hebat: Webpack Dev Server dan dokumentasi connect-history-api-fallback.

person Govind Rai    schedule 13.08.2017