2015-10-28 15 views
42

Sto seguendo alcuni tutorial per costruire un'app isomorfa con express e react. Sto confondendo con il webpack-dev-server.Ho bisogno di webpack-dev-server se sto usando un server nodo come express

Il webpack esercitazione dice a proposito della webpack-dev-server:

Questo si lega un piccolo Server Express su localhost: 8080, che serve i vostri beni statici così come il fascio (compilato automaticamente).

Aggiorna automaticamente la pagina del browser quando un pacchetto viene ricompilato (socket.io). Apri http://localhost:8080/webpack-dev-server/bundle nel tuo browser.

Dal momento che ho un server express, ho davvero bisogno di webpack-dev-server? O quali sono i vantaggi e gli svantaggi di usarlo? E se voglio usare react-hot-loader, è necessario il webpack-dev-server?

risposta

54

Dal momento che ho un server express, ho davvero bisogno di webpack-dev-server?

Sì e no. È possibile utilizzare un approccio ibrido, che in pratica installa il webpack-dev-server come proxy. Hai il tuo server espresso che serve tutto tranne che per le risorse. Se è una risorsa, la richiesta viene inoltrata/inoltrata al webpack-dev-server. Vedere la risposta qui per maggiori dettagli: How to allow for webpack-dev-server to allow entry points from react-router

In alternativa, è possibile utilizzare webpack-dev-middleware e webpack-hot-middleware invece se non si vuole affrontare con tutta la logica proxy disordinato e avendo 2 server che eseguono. Vedere l'esempio qui: https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js

quali sono i vantaggi e gli svantaggi del suo utilizzo?

Ricarica diretta e sostituzione modulo caldo. Funzionalità molto utile per lo sviluppo a mio avviso

E se voglio utilizzare react-hot-loader, è necessario il webpack-dev-server?

No, funziona su hot module replacement interface di Webpack. Puoi creare il tuo 'hot server' se lo desideri. Il client webpack-dev-server ascolta solo socket.io per gli aggiornamenti a caldo e chiama postMessage (https://github.com/webpack/webpack-dev-server/blob/8e8f540b2f7b35f7b6c3ce616a7fd2215aaa6eea/client/index.js#L64-L67) che viene quindi prelevato dal server https://github.com/webpack/webpack/blob/bac9b48bfb0f7dd9732f2faafb43ebb22ee2a2a7/hot/only-dev-server.js#L59-L67.

O quello che consiglio è che puoi semplicemente usare il middleware webpack-dev-middle e il middleware webpack-hot che ho menzionato sopra. In questo modo, non devi preoccuparti della logica proxy e puoi facilmente integrare il ricaricamento a caldo nel tuo server Express esistente senza bisogno di webpack-dev-server

+0

Thx! Quindi posso dire che la migliore pratica dell'uso di react-hot-loader è usare i middleware che hai citato? Cosa succede se si considera l'env di produzione? Non penso di aver bisogno di un live-reloadering, giusto? Quindi dovrei cancellare i codici del middleware? –

+0

react-hot-loader si sta deprezzando, quindi guarderei su https://github.com/gaearon/react-transform-hmr (è dello stesso autore). Sì, non è necessario il live-reloading per la produzione, quindi nel server.js vorrei solo controllare condizionatamente l'ambiente. Se è in sviluppo, usa il middleware. altrimenti, basta saltarlo. – trekforever

+0

Thnx. Ho accettato questa risposta. –

Problemi correlati