Exécution d’un serveur express de noeud à l’aide de webpack-dev-server

J’utilise webpack pour exécuter mon frontend avec succès en utilisant la configuration suivante:

{ name: 'client', entry: './scripts/main.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query:{ presets: ['es2015', 'react', 'stage-2'] } } ] } } 

J’essaie également de mettre en place un backend node.js express, et je souhaiterais également l’exécuter via webpack, afin d’avoir un seul serveur exécutant le backend et le frontend, et parce que je veux utiliser babel pour transstackr mon javascript

J’ai fait un serveur de test rapide ressemblant à ceci:

 var express = require('express'); console.log('test'); var app = express(); app.get('/', function(req, res){ res.send("Hello world from Express!!"); }); app.listen(3000, function(){ console.log('Example app listening on port 3000'); }); 

Si je lance ceci avec node index.js et ouvre mon navigateur sur localhost:3000 il affiche “Hello world from Express !!”. Jusqu’ici tout va bien. Ensuite, j’ai essayé de créer un pack de configuration Web pour cela:

 var fs = require('fs'); var nodeModules = {}; fs.readdirSync('node_modules') .filter(function(x) { return ['.bin'].indexOf(x) === -1; }) .forEach(function(mod) { nodeModules[mod] = 'commonjs ' + mod; }); module.exports = [ { name: 'server', target: 'node', entry: './index.js', output: { path: __dirname, filename: 'bundle.js' }, externals: nodeModules, module: { loaders: [ { test: /\.js$/, loaders: [ 'babel-loader' ] }, { test: /\.json$/, loader: 'json-loader' } ] } } 

Lorsque je lance la commande webpack-dev-server elle démarre correctement (il semble). Cependant, si je vais maintenant sur mon navigateur localhost:3000 , cela signifie simplement que la page Web n’est pas disponible, tout comme lorsque le serveur ne fonctionne pas du tout.

Je suis tout à fait nouveau à la fois sur les nœuds et les webpack, donc j’ai fait une petite erreur quelque part, ou je suis loin;)

Webpack-dev-server est idéal pour le développement côté client, mais il ne déploiera pas les applications ou les middleware Express. Donc, en développement, je recommande d’exécuter deux serveurs distincts: un pour le client et un pour les API de votre côté serveur.

Nodemon npm install --save-dev nodemon est un bon serveur de développement backend qui vous permet de redéployer à chaud vos API, ou vous pouvez simplement utiliser express et redémarrer lorsque vous apportez des modifications. En production, le client et l’api seront toujours servis par le même serveur express.

Définissez un événement de cycle de vie pour nodemon et webpack-dev-server dans votre package.json afin de faciliter leur démarrage (exemple: npm run dev-server ).

 "scripts": { "start": "webpack --progress --colors", "dev-server": "nodemon ./server.js localhost 8080", "dev-client": "webpack-dev-server --port 3000", } 

Ou, pour exécuter directement directement depuis le noeud:

 "scripts": { "start": "webpack --progress --colors", "dev-server": "node dev-server.js", "dev-client": "webpack-dev-server --port 3000", } 
 // dev-server.js const express = require('express'); const app = express(); // Import routes require('./_routes')(app); // < -- or whatever you do to include your API endpoints and middleware app.set('port', 8080); app.listen(app.get('port'), function() { console.log('Node App Started'); }); 

Remarque: Le serveur api doit utiliser un port différent de celui de webpack-dev-server.

Et enfin, dans votre webpack-dev-config, vous devez utiliser un proxy pour redirect les appels vers votre API vers le nouveau port:

 devServer: { historyApiFallback: true, hot: true, inline: true, host: 'localhost', // Defaults to `localhost` port: 3000, // Defaults to 8080 proxy: { '^/api/*': { target: 'http://localhost:8080/api/', secure: false } } }, // and separately, in your plugins section plugins: [ new webpack.HotModuleReplacementPlugin({ multiStep: true }) ] 

** Points bonus pour avoir un seul script pour démarrer et tuer les deux

D’après vos questions ici et ici , il semble que vous utilisiez ReactJS avec ES6. J’ai été confronté exactement au même problème et voici comment je l’ai abordé –

  1. Avoir plusieurs points d’entrée pour votre application

En particulier, vous pouvez mettre tous les fichiers de votre fournisseur comme JQuery, React, etc. en un seul bloc. De cette façon, les fichiers de votre fournisseur restront les mêmes, même lorsque vous modifiez vos fichiers souce. Vous pouvez append cette ligne à votre configuration webpack

 entry: { vendors: ['react','reactDom','jquery'] //Any other libraries } 

Utilisez CommonsChunkPlugin pour que webpack détermine le code / les modules que vous utilisez le plus, et placez-le dans un bundle séparé pour l’utiliser n’importe où dans votre application.

 plugins: [ new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity), ] 
  1. Utilisez React Hot Loader

Exécutez npm install react-hot-loader --save-dev . Assurez-vous d’avoir installé webpack-dev-server premier.

Ensuite, vous devez changer vos chargeurs à ceci –

 loaders: [ { test: /\.jsx?$/, loaders: ['react-hot'], include: path.join(__dirname, 'public') },{ loader: 'babel', query: { presets: ['react', 'es2015'] }, include: path.join(__dirname, 'public') }, ] 

Assurez-vous que React Hot Loader arrive avant Babel dans le tableau des chargeurs. Assurez-vous également d’avoir include: path.join(__dirname, 'public') pour éviter de traiter node_modules, ou vous pourriez avoir une erreur comme celle-ci –

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

  1. Modifications de vos balises de script dans votre page index.html

Si votre HTML a quelque chose comme ça –

   

Changez ceci pour pointer vers votre proxy webpack-dev-server –

   
  1. Exécuter webpack-dev-server --hot --inline ,

attendez la fin du groupement, puis cliquez sur http: // localhost: 3000 (votre port de serveur express) dans votre navigateur.

Si vous rencontrez des erreurs, vous pourriez trouver ce guide de dépannage très utile.

J’espère que cela aide, et vous pouvez jeter un oeil à la configuration de webpack pour mon projet ici

Puisque webpack-dev-server est juste un petit serveur express avec compilation sur changement et rechargement à chaud.

Donc, si vous avez déjà un serveur express pour API backend, fusionnez simplement la comstack on change and hot reload sur votre serveur express.

Ensuite, après avoir jeté un coup d’oeil sur le package.json de webpack-dev-server , je trouve que la clé est juste webpack-dev-middleware

 const express = require('express'); //your original BE server const app = express(); const webpack = require('webpack'); const middleware = require('webpack-dev-middleware'); //webpack hot reloading middleware const comstackr = webpack({ .. webpack options .. }); //move your `devServer` config from `webpack.config.js` app.use(middleware(comstackr, { // webpack-dev-middleware options })); app.listen(3000, () => console.log('Example app listening on port 3000!')) 

Ainsi, lorsque vous exécuterez votre serveur BE, il comstackra toutes les choses en utilisant webpack et surveillera les modifications, LOL ~

En outre, ajoutez Webpack-hot-middleware pour la fonction de rechargement à chaud, voir Remplacement du module actif