Configurar múltiples entry points en Webpack

Por Darío Rivera

Publicado el 2020-09-30 en 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.

Categorías