Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs dll

95

Aku mulai bekerja dengan webpackdengan node/expresslingkungan pengembangan ReactJSaplikasi sisi server diberikan dengan react-router. Saya menjadi sangat bingung tentang peran setiap paket webpack untuk lingkungan dev dan prod (runtime).

Berikut ringkasan pemahaman saya:

webpack: Adalah sebuah paket, alat untuk menggabungkan bagian-bagian berbeda dari aplikasi web dan memaketkannya kemudian menjadi satu file .js (biasanya bundle.js). File hasil kemudian disajikan dalam lingkungan prod untuk dimuat oleh aplikasi dan berisi semua komponen yang diperlukan untuk menjalankan kode. Fitur termasuk kode menyusut, minifikasi, dll.

webpack-dev-server: Merupakan paket yang menawarkan server untuk memproses file website. Itu juga membangun satu file .js ( bundle.js) dari komponen klien tetapi menyajikannya dalam memori. Ia juga memiliki opsi ( -hot) untuk memantau semua file bangunan dan membangun bundel baru dalam memori jika terjadi perubahan kode. Server disajikan langsung di browser (misal:) http:/localhost:8080/webpack-dev-server/whatever. Kombinasi pemuatan memori, pemrosesan panas, dan penyajian browser memungkinkan pengguna memperbarui aplikasi di browser saat kode berubah, ideal untuk lingkungan pengembangan.

Jika saya ragu tentang teks di atas, saya benar-benar tidak yakin tentang konten di bawah, jadi mohon beri tahu saya jika perlu

Masalah umum saat menggunakan webpack-dev-serverwith node/expressadalah webpack-dev-serverserver, sebagaimana adanya node/express. Itu membuat lingkungan ini sulit untuk menjalankan klien dan beberapa kode node / express (API, dll.). CATATAN: Inilah yang saya hadapi tetapi akan sangat bagus untuk memahami mengapa itu terjadi secara lebih rinci ...

webpack-dev-middleware: Ini adalah middleware dengan fungsi yang sama webpack-dev-server(inmemory bundling, hot reloading), tetapi dalam format yang dapat disuntikkan ke server/expressaplikasi. Dengan cara itu, Anda memiliki semacam server (the webpack-dev-server) orang dalam server node. Ups: Apakah ini mimpi gila ??? Bagaimana karya ini bisa memecahkan persamaan dev dan prod dan membuat hidup lebih sederhana

webpack-hot-middleware: Ini ... Terjebak di sini ... menemukan bagian ini ketika mencari webpack-dev-middleware... Tidak tahu bagaimana menggunakannya.

CATATAN AKHIR: Maaf, apakah ada pemikiran yang salah. Saya sangat membutuhkan bantuan untuk memahami varian ini di lingkungan yang kompleks. Jika memungkinkan, tambahkan lebih banyak paket / data yang akan membangun seluruh skenario.

javascript node.js webpack webpack-dev-server webpack-dev-middleware Mendes
sumber
2
Tak satu pun dari paket yang tercantum di sini digunakan di sisi server dalam produksi - mereka hanyalah alat pengembang. Anda akan menggunakan webpack-dev-middleware(dan berpotensi webpack-hot-middleware) jika Anda ingin menulis server pengembangan kustom Anda sendiri. Kecuali jika ada fitur tertentu yang Anda inginkan yang webpack-dev-servertidak dimiliki, Anda sebaiknya menggunakannya.
Joe Clay

Jawaban:

120

webpack

Seperti yang Anda jelaskan, Webpack adalah bundler modul, yang menggabungkan berbagai format modul terutama sehingga dapat dijalankan di browser. Ia menawarkan CLI dan Node API .

webpack-dev-middleware

Webpack Dev Middleware adalah middleware yang dapat dipasang di server ekspres untuk melayani kompilasi terbaru dari bundel Anda selama pengembangan. Ini menggunakan webpackAPI Node dalam mode jam tangan dan alih-alih mengeluarkannya ke sistem file, ia mengeluarkannya ke memori .

Sebagai perbandingan, Anda mungkin menggunakan sesuatu seperti ini express.staticalih - alih middleware ini dalam produksi.

webpack-dev-server

Server Pengembang Webpack sendiri merupakan server ekspres yang digunakan webpack-dev-middlewareuntuk melayani bundel terbaru dan juga menangani permintaan penggantian modul panas (HMR) untuk pembaruan modul langsung di klien.

webpack-hot-middleware

Webpack Hot Middleware adalah sebuah alternatif webpack-dev-servertetapi alih-alih memulai server itu sendiri, ini memungkinkan Anda untuk memasangnya di server ekspres yang ada / khusus bersama webpack-dev-middleware.

Juga...

webpack-hot-server-middleware

Hanya untuk lebih membingungkan, ada juga Webpack Hot Server Middleware yang dirancang untuk digunakan bersama webpack-dev-middlewaredan webpack-hot-middlewareuntuk menangani penggantian modul panas dari aplikasi server yang dirender.

riscarrott.dll
sumber
2
Bagi mereka yang mencari kerusakan penggantian modul hot-end front-end vs back-end, silakan lihat posting ini: stackoverflow.com/questions/46086297/… Xlee melakukan pekerjaan yang baik dalam menjelaskan persyaratan untuk setiap sisi - sisi server perlu restart , front-end memungkinkan memuat dalam bundel javascript yang diperbarui.
abelito
9

Pada pembaruan pada tahun 2018 dan mempertimbangkan catatan webpack-dev-server di halaman GitHub resminya:

Proyek dalam Pemeliharaan Harap dicatat bahwa webpack-dev-server saat ini dalam mode hanya pemeliharaan dan tidak akan menerima fitur tambahan dalam waktu dekat. Sebagian besar permintaan fitur baru dapat diselesaikan dengan middleware Express; silakan lihat menggunakan kaitan sebelum dan sesudah dalam dokumentasi.

Apa pilihan alami untuk membangun HMR webpack?

Mendes
sumber
2
Ia juga mengatakan Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.Jadi, Anda mungkin ingin mencoba webpack-serve .
Bruce Sun
3
Catatan pemeliharaan telah dihapus. Jadi saya rasa direkomendasikan lagi ??? Menjengkelkan karena alat pengembang yang begitu penting memiliki tim pengelola yang buruk di sekitarnya.
Kapten Fogetti
5
webpack-serve tidak digunakan lagi dan @CaptainFogetti mengatakan bahwa catatan pemeliharaan telah dihapus dari webpack-dev-server mulai hari ini
Anoop D