node.js - react - webpack org js

¿Webpack para back-end?

Question

Me preguntaba, comencé a usar Webpack para un nuevo proyecto y hasta ahora funciona bien. Casi diría que me gusta más que Grunt, que utilicé antes. Pero ahora estoy bastante confundido sobre cómo y / o debería usarlo con mi back-end Express.

Mira, estoy creando una aplicación con un front-end (ReactJS) y un back-end (ExpressJS). La aplicación se publicará en Heroku. Ahora parece que también debería usar Webpack con ExpressJS para poner en marcha la aplicación con un solo comando (front-end y back-end).

Pero el tipo que escribió este blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I parece usar Webpack para agrupar todos los archivos js back-end, lo que en mi opinión no es necesario. ¿Por qué debería agrupar mis archivos de back-end? Creo que solo quiero ejecutar el back-end, ver mis archivos de back-end en busca de cambios y usar el resto del poder de Webpack solo para el front-end.

¿Cómo agrupan el front-end pero, al mismo tiempo, ejecutan la parte del nodo de back-end? ¿O hay alguna buena razón para agrupar archivos de fondo con Webpack?

Answer 1

Por qué usar webpack en back-end de nodo

Si hablamos de la aplicación de reacción y nodo , puedes crear una aplicación de reacción isomorfa . Y si está utilizando import módulos ES6 en la aplicación de reacción en el lado del cliente, está bien; están empaquetados por paquete web en el lado del cliente.

Pero el problema está en el servidor cuando está utilizando los mismos módulos de reacción ya que el nodo no es compatible con los módulos ES6 . Puede usar require(''babel/register''); en el lado del servidor de nodos, pero transcribe el código en tiempo de ejecución; no es efectivo. La forma más común de resolver este problema es paquete back-end por paquete web (no necesita todo el código para ser transpilado por paquete web, solo problemático, como reaccionar en este ejemplo).

Lo mismo ocurre con JSX .

Frontend y back-end de paquete al mismo tiempo

La configuración de su paquete web puede tener configuraciones en array: una para frontend y la segunda para back-end:

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 inicia esta configuración con el webpack --watch , webpack --watch que en paralelo construirá sus dos archivos. Cuando edite código específico de frontend-output.js se generará frontend-output.js , lo mismo se backend-output.js a backend-output.js . La mejor parte es cuando editas la parte de reacción isomorfa: webpack creará ambos archivos a la vez.

Puede encontrar en esta explicación tutorial cuándo usar el paquete web para el nodo (en el capítulo 4).