Marcelo Carmona
Published on

Webpack building progress information

Authors

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 modulo, los bundles en si, tiempo que lleva realizar el proceso, si es que estamos transpilando el código mediante babel por ejemplo o utilizando postcss para preprocesar nuestras hojas de estilo.

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

webpack-dashboard

Este dashboard fue creado por la gente de formidable.com una muy buena opcion 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 especifica que se realiza en el proceso de building
  • Progress: progreso de building en vivo
  • Modules: una lista de tus modulos, su tamañoo 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 screen shot

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 tu 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 mas 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 que es bastante simple pero cuando se trabaja en un proyecto grande y el tiempo de building aumenta, aunque sea mostrar una barra de progreso mejora bastante la experiencia del developer.

webpack progressbar plugin

Para instalarlo necesitamos ejecutar:

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

Luego agregarlo 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 mas opciones de configuración.

webpack progress plugin

Y por último si se quiere tener algo aun mas simple o mas custom, podemos usar el progressplugin provisto por webpack .

Que básicamente se inserta como un plugin mas 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 el percentage es un valor entre 0 y 1 que va indicando la completitud 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 linea por eso uso \r.

Y este ejemplo se puede ver así:

building bundles
View on GitHub