web-dev-qa-db-fra.com

Webpack pour le back-end?

Je me demandais juste, j'ai commencé à utiliser Webpack pour un nouveau projet et jusqu'à présent, cela fonctionne bien. Je dirais presque que je l’aime mieux que Grunt, que j’avais utilisé auparavant. Mais maintenant, je ne sais trop comment et ou je devrais l'utiliser avec mon back-end Express?

Vous voyez, je crée une application avec un front-end (ReactJS) et un back-end (ExpressJS). L'application sera publiée sur Heroku. Maintenant, il semble que je devrais utiliser Webpack avec ExpressJS également pour que l'application soit opérationnelle avec une seule commande (front-end et back-end).

Mais le gars qui a écrit ce blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I semble utiliser Webpack pour regrouper tous les fichiers js dorsaux, ce qui est à mon avis vraiment pas nécessaire. Pourquoi devrais-je regrouper mes fichiers back-end? Je pense que je veux juste exécuter le back-end, surveiller mes fichiers back-end pour les modifications et utiliser le reste de la puissance de Webpack juste pour le front-end.

Comment regroupez-vous le front-end tout en exécutant la partie nodejs du back-end? Ou existe-t-il une bonne raison de regrouper des fichiers back-end avec Webpack?

node.jsherokuwebpack
52
Erik van de Ven

Pourquoi utiliser Webpack sur un noeud de noeud

Si nous parlons de réagir et noeud app que vous pouvez construire - application de réaction isomorphe . Et si vous utilisez import les modules ES6 dans l’application react du côté client, c’est ok - ils sont regroupés par Webpack du côté client.

Mais le problème est sur le serveur lorsque vous utilisez les mêmes modules de réaction depuis le noeud ne supporte pas les modules ES6 . Vous pouvez utiliser require('babel/register'); du côté du serveur de noeud, mais le code transipile au moment de l'exécution n'est pas efficace. Le moyen le plus courant de résoudre ce problème consiste à utiliser backend pack par webpack (il n'est pas nécessaire que tout le code soit transpilé par webpack - uniquement problématique, comme dans React stuff dans cet exemple).

Il en va de même avec [~ # ~] jsx [~ # ~] .

Regrouper frontend et backend en même temps

Votre configuration webpack peut avoir à configurer dans array: une pour le frontend et une autre 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 configuration avec webpack --watch il construira en parallèle vos deux fichiers. Lorsque vous éditez du code spécifique à l’intérieur uniquement frontend-output.js sera généré, il en va de même pour backend-output.js. La meilleure partie est lorsque vous modifiez une partie de réaction isomorphique - Webpack créera les deux fichiers en même temps.

Vous pouvez trouver dans cette tutoriel explication quand utiliser webpack pour node (au chapitre 4).

58
Everettss

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

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
    ...
};
3
erandros