Configurar múltiples entry points en Webpack

Author
By Darío Rivera
Posted on 2020-09-30 in Webpack

En nuestro artículo anterior vimos Qué es Webpack, para qué sirve y cómo utilizarlo. La mayoría de las aplicaciones utilizan un solo entry point, es decir, una sola configuración de archivo como punto de entrada para compilar todos los assets del proyecto. Pero qué sucede  cuando tienes estilos o funcionalidades que utilizas en muy pocas páginas ?. Poco a poco vas empaquetando todo en un solo archivo y con el tiempo resulta que el desempeño de tu aplicación comienza a disminuir. Es por esto que hoy veremos cómo configurar múltiples entry points en Webpack.

Antes que nada, veamos cómo luce una archivo de configuración de Webpack sencillo.

const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'app.js'
    }
}

Con esto, todo lo que haya en main.js terminará en app.js. Pero supongamos que tenemos algunas vistas como el home que no cargan muchos archivos, y otras vistas de edición de texto o de un dashboard donde es necesario cargar muchas librerías javascript y css. Veamos entonces cómo modificar nuestro archivo de configuración de webpack para mejorar un poco el performance.

const path = require('path');

module.exports = {
    entry: {
        home: path.resolve(__dirname, 'resources/home.js'),
        editor: path.resolve(__dirname, 'resources/editor.js'),
        dashboard: path.resolve(__dirname, 'resources/dashboard.js')
    },
    output: {
        path: path.resolve(__dirname),
        filename: 'public/[name].js'
    }
}

Después de esto basta correr el comando para generar los assets y obtedrás una salida como la siguiente:

Hash: 4c83c31e362a5abf537a
Version: webpack 4.44.2
Time: 179ms
Built at: 09/28/2020 10:34:55 PM
              Asset      Size     Chunks             Chunk Names
public/dashboard.js  3.93 KiB  dashboard  [emitted]  dashboard
   public/editor.js  3.91 KiB     editor  [emitted]  editor
     public/home.js   3.9 KiB       home  [emitted]  home
Entrypoint home = public/home.js
Entrypoint editor = public/editor.js
Entrypoint dashboard = public/dashboard.js
[./resources/dashboard.js] 99 bytes {dashboard} [built]
[./resources/editor.js] 99 bytes {editor} [built]
[./resources/home.js] 99 bytes {home} [built]

Ya puedes modificar tus vistas y cargar exactamente lo que necesitan. Hasta la próxima.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.