web-dev-qa-db-fra.com

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

J'utilise webpack pour exécuter mon interface de réaction 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 back-end node.js express, et j'aimerais le faire aussi via Webpack, de sorte qu'un seul serveur exécute à la fois le backend et le front-end, et parce que je veux utiliser babel pour transpiler. mon javascript.

J'ai fait un serveur de tests 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 ouvrez mon navigateur sur localhost:3000 il affiche "Bonjour tout le monde d'Express !!". Jusqu'ici tout va bien. Ensuite, j'ai essayé de créer une configuration Web pour le pack:

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'
            }
        ]
    }
}

Quand je lance la commande webpack-dev-server il démarre avec succès (semble-t-il). Cependant, si je vais à mon navigateur sur localhost:3000 _ maintenant, il est simplement indiqué que la page Web n'est pas disponible, tout comme lorsque le serveur ne fonctionne pas du tout.

Je suis très nouveau dans les deux nœuds et webpack, donc soit j'ai commis une petite erreur quelque part, soit je me suis mal pris;)

node.jsexpresswebpackwebpack-dev-server
58
Øyvind Bråthen

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

Nodemon npm install --save-dev nodemon est un bon serveur de développement backend qui vous permettra 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 cycle de vie pour nodemon et webpack-dev-server dans votre package.json pour 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 le courrier 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 webpack-dev-server.

Et enfin, dans votre webpack-dev-config, vous devez utiliser un proxy pour rediriger les appels de 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

88
perilandmishap

Depuis webpack-dev-server est juste un petit serveur express avec compilation à la modification et au rechargement à chaud.

Donc, si vous avez déjà un serveur express pour l'API backend, il vous suffit de fusionner le compile on change and hot reload sur votre serveur express.

Ensuite, jetez un coup d'œil au 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 compiler = webpack({ .. webpack options .. }); //move your `devServer` config from `webpack.config.js`


app.use(middleware(compiler, {
  // webpack-dev-middleware options
}));

app.listen(3000, () => console.log('Example app listening on port 3000!'))

Ainsi, lorsque vous exécutez votre serveur BE, il compilera tout ce qui est utilisé avec webpack et surveillera les modifications, LOL ~

Ajoutez également webpack-hot-middleware pour la fonction de rechargement à chaud, voir remplacement du module à chaud

14
Shawn Wang

D'après vos questions ici et ici , il apparaît que vous utilisez 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 vos fichiers de fournisseur tels que JQuery, React etc.) dans un bloc. Ainsi, vos fichiers de fournisseur resteront les mêmes même lorsque vous modifiez vos fichiers de base. Vous pouvez ajouter cette ligne. à votre config 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 ensemble séparé à 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 d’abord installé webpack-dev-server.

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 précède Babel dans le tableau loaders. Assurez-vous également que vous avez include: path.join(__dirname, 'public') pour éviter de traiter node_modules, sinon vous risquez une erreur comme celle-ci -

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

  1. Modifications apportées à vos balises de script dans votre page index.html

Si votre html a quelque chose comme ça -

<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>

Modifiez cela pour qu'il pointe vers votre proxy webpack-dev-server -

<script src="http://localhost:8080/dist/js/vendors.js"></script>
<script src="http://localhost:8080/dist/js/app.bundle.js"></script>

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

attendez que le regroupement soit terminé, puis appuyez sur http: // localhost: 30 (le port de votre serveur express) dans votre navigateur.

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

J'espère que cela vous aidera et que vous pourrez jeter un coup d'œil à la configuration du pack Web pour mon projet ici

7
booleanhunter