Webpack pour le back-end?

Question

Je me demandais juste, j'ai commencé à utiliser Webpack pour un nouveau projet et pour l'instant ça fonctionne. On aurait presque dire que je l'aime mieux que Grunt, que j'ai utilisé avant. Mais maintenant, je suis assez confus comment et ou je doit l'utiliser avec mon Express back-end?

Voyez, je suis de la création d'une application avec un front-end (ReactJS) et un back-end (ExpressJS). L'application sera publié sur Heroku. Maintenant il semble que je devrais utiliser Webpack avec ExpressJS ainsi pour obtenir l'application et en cours d'exécution avec une seule commande (front-end et back-end).

Mais le gars qui a écrit cet article sur le blog http://jlongster.com/Backend-Apps-with-Webpack--Part-I semble utiliser Webpack de regrouper toutes les js fichiers, ce qui est à mon avis vraiment pas nécessaire. Pourquoi devrais-je associer mon back-end de fichiers? Je pense que je veux juste faire le back-end, regarder mes back-end de fichiers pour les modifications et utiliser le reste de Webpack est de pouvoir pour le front-end.

Comment faites-vous pour intégrer le front-end, mais en même temps exécuter le back-end de nodejs partie? Ou est-il une bonne raison de bundle back-end de fichiers avec Webpack?

Answer 1

Pourquoi utiliser webpack sur le nœud backend

Si nous parlons de réagir et de nœud de l' application, vous pouvez construire isomorphe réagir app. Et si vous utilisez import ES6 des Modules de réagir application côté client, c'est ok, ils sont regroupés par webpack sur le côté client.

Mais le problème est sur le serveur lorsque vous utilisez le même réagir modules depuis le nœud ne prend pas en charge ES6 Modules. Vous pouvez utiliser require('babel/register'); dans le nœud serveur de côté, mais il transipile code dans l'exécution, il n'est pas efficace. La façon la plus commune pour résoudre ce problème est pack backend par webpack (vous n'avez pas besoin de code pour être transpile par webpack - seulement problématique, à l'instar de réagir choses dans cet exemple).

Il en va de même avec JSX.

Le regroupement frontend et backend en même temps

Votre webpack config peut avoir de configs dans la gamme: un pour le frontend et le deuxième pour le backend:

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

Si vous commencez cette config avec webpack --watch il permettra en parallèle de construire vos deux fichiers. Lorsque vous modifiez frontend code spécifique seulement frontend-output.js sera généré, c'est la même pour backend-output.js. La meilleure partie est quand vous modifiez isomorphe réagir partie - webpack va créer les deux fichiers à la fois.

Vous trouverez dans ce tutoriel, explication quand à l'utilisation webpack pour le nœud (chapitre 4).

Answer 2

Vous pouvez utiliser webpack-node-externals , à partir du fichier readme:

 npm install webpack-node-externals --save-dev
 

Dans votre webpack.config.js:

 var nodeExternals = require('webpack-node-externals');

module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};