Marcelo Carmona
Publicado el

Información del progreso de build en Webpack

Autores

Cuando utilizamos webpack para generar nuestros bundles, en muchos casos, en nuestro entorno de desarrollo resulta conveniente mostrar información acerca del tamaño que ocupa cada módulo, los bundles en sí, el tiempo que lleva realizar el proceso, si estamos transpilando el código mediante Babel o si estamos utilizando PostCSS para preprocesar nuestras hojas de estilo.

Las opciones que tenemos actualmente para mostrar esta información se implementan por medio de plugins para webpack. Voy a dar tres alternativas simples para mostrar este tipo de información.

webpack-dashboard

Este dashboard fue creado por la gente de formidable.com, una muy buena opción que muestra información sobre:

  • Log: el log de errores del proceso de building
  • Status: estado del proceso del building
  • Operation: muestra la operación específica que se realiza en el proceso de building
  • Progress: progreso de building en vivo
  • Modules: una lista de tus módulos, su tamaño y porcentaje con respecto al tamaño del bundle
  • Assets: lista de assets generados

Si normalmente usas webpack con webpack-dev-server o webpack-dev-middleware estarás acostumbrado a ver algo como esto:

webpack dashboard common example

El webpack-dashboard, creado por Ken Wheeler, tiene el siguiente aspecto :)

webpack dashboard screenshot

Acá lo puedes ver en acción:

webpack dashboard in action

Instalarlo es bastante simple:

npm install webpack-dashboard --save-dev

Luego agregamos el plugin a nuestra configuración de webpack:

// Import the plugin:
var DashboardPlugin = require('webpack-dashboard/plugin')

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [new DashboardPlugin()]

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin())

Ahora tenemos que llamar a webpack-dashboard desde nuestro package.json. Si tu dev server se parece a esto:

"scripts": {
    "dev": "node index.js"
}

Debemos cambiarlo por esto:

"scripts": {
    "dev": "webpack-dashboard -- node index.js"
}

Para ver más información sobre la configuración, se puede ver el proyecto en GitHub.

Como dije anteriormente, me parece muy buena la propuesta de tener un dashboard para obtener información relevante de nuestros proyectos. Acá dejo algunos tweets que se escribieron en el momento de su lanzamiento:









webpack progressBar plugin

Esta es otra opción bastante simple, pero cuando se trabaja en un proyecto grande y el tiempo de building aumenta, incluso mostrar una barra de progreso mejora bastante la experiencia del desarrollador.

webpack progressbar plugin

Para instalarlo necesitamos ejecutar:

npm install progress-bar-webpack-plugin --save-dev

Luego lo agregamos como plugin en nuestro archivo de configuración de webpack:

var ProgressBarPlugin = require('progress-bar-webpack-plugin');

...

plugins: [
  new ProgressBarPlugin()
]

Pueden ver el proyecto en GitHub para ver más opciones de configuración.

webpack progress plugin

Y por último, si se quiere tener algo aún más simple o más custom, podemos usar el ProgressPlugin provisto por webpack.

Este básicamente se inserta como un plugin más en nuestro archivo de configuración de webpack.

new webpack.ProgressPlugin(function handler(percentage, msg) {
  /* ... */
})

Podemos utilizar este hook para mostrar información del progreso, donde percentage es un valor entre 0 y 1 que va indicando el grado de avance del proceso.

Por ejemplo, lo podemos utilizar de la siguiente manera:

new webpack.ProgressPlugin((percentage, msg) => {
  process.stdout.clearLine()
  process.stdout.write(` \u00BB building bundles: ${(percentage * 100.0).toFixed(2)} % => ${msg}\r`)
})

En este caso, quiero ir mostrando la información en una sola línea, por eso uso \r.

Y este ejemplo se puede ver así:

building bundles
Ver en GitHub