Apakah sebab skrin putih bertindak balas?

Sebab skrin putih bertindak balas ialah apabila pemalam HtmlWebpackPlugin memperkenalkan bundle.js, ia memperkenalkan laluan relatif Penyelesaiannya ialah: 1. Tambahkan publicPath pada konfigurasi output; mod, tetapkan sejarahApiFallback Ia boleh menjadi benar.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah sebab skrin putih bertindak balas?

Masalah skrin putih dalam mod sejarah tindak balas

Baru-baru ini, apabila saya menggunakan reaksi semula, kerana saya tidak mahu menggunakan cincangan hodoh, saya menukar mod penghalaan ke sejarah, yang mengakibatkan beberapa masalah, seperti menyegarkan skrin putih dan gagal memuatkan imej Di sini kita bercakap tentang penyelesaiannya.

Punca

Pertama sekali, mari kita bincangkan tentang sebab siri fenomena ini.

Tiada masalah apabila kami menyegarkan halaman di bawah laluan http://localhost:xxxx/ Semuanya kelihatan seperti biasa Tetapi apabila kita bertukar kepada submodul, skrin akan menjadi putih apabila menyegarkan.

Kami melihat bahawa ia akan mencari bundle.js daripada laluan semasa. Kerana apabila pemalam HtmlWebpackPlugin membantu kami memperkenalkan bundle.js, ia memperkenalkan laluan relatif

Oleh itu, apabila menyegarkan, ia dicari berbanding dengan url semasa.

Penyelesaian

Setelah sebabnya jelas, penyelesaiannya sudah sedia. Kita hanya perlu mencari cara untuk menjadikan laluan pemuatan bundle.js bermula dari direktori akar apabila menyegarkan, bukannya mengikut url semasa.

1. Tambahkan publicPath pada konfigurasi output

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

Apakah maksud publicPath? Terdapat ayat sedemikian dalam laman web rasmi

webpack-dev-server juga akan menggunakan publicPath sebagai asas secara lalai, dan menggunakannya untuk memutuskan dalam direktori mana untuk membolehkan perkhidmatan mengakses fail yang dikeluarkan oleh webpack.

Pemahaman mudah, sumber statik anda akan dimuatkan daripada laluan ini

publicPath: "/" //Loading path '/assets/js/bundle.js'

In dengan cara ini, setiap muat semula akan mula dimuatkan daripada direktori akar, jadi bundle.js kami tidak akan hilang. Masalah yang sama berlaku apabila imej tidak dapat dimuatkan.

2. historyApiFallback of webpack-dev-server

Dalam mod sejarah, devServer perlu mengkonfigurasi historyApiFallback kepada benar

devServer: {
historyApiFallback: true
}

Beri perhatian kepada dua perkara di atas, dan mod sejarah akan berfungsi seperti biasa digunakan. Jika ada sebab lain, sila berasa bebas untuk menambahnya.

ps: Selepas projek digunakan pada pelayan, skrin halaman menjadi kosong tetapan yang berkaitan perlu dibuat di latar belakang, yang tidak akan dibincangkan di sini.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah sebab skrin putih bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!