Aprende Webpack desde cero

Depurar Webpack

  • Llegamos a la última lección del curso, donde vamos a realizar tareas de depuración (debug) con Webpack.
  • Existen varios escenarios donde puedas necesitar depurar tu proyecto con Webpack. El más común será para tratar errores en tu propia aplicación, una vez compilada.
  • Si tras hacerlo se te ocurre abrir el bundle en las herramientas de desarrollo y aún eliminando la minificación, comprobarás que es imposible trazar ningún error ya que esta no es tu estructura original. Es aquí donde entran en juego los source maps.
  • Como ves Chrome nos indica que disponemos de source maps de los archivos JavaScript, así lo indicamos con la propiedad devtool. Si buscamos por ejemplo App.vue podemos examinarlo y añadir puntos de ruptura y seguir ejecutando el código.
  • Puedes repetir este proceso con cualquier otra dependencia JavaScript ya que dispondrás de su correspondiente source map.
  • Otro de los casos tiene que ver con la depuración de la propia configuración de Webpack. Algo útil sobre todo si estás desarrollando alguna herramienta o plugin.
  • Para depurar Webpack en sí debemos lanzar una sesíon de depuración en Node. Para no tener que escribirlo en el terminal cada vez, lo mejor es añadirlo como una tarea más a nuestro package.json.
"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config webpack.prod.js --colors"
  • Al lanzar la tarea y abriendo (en mi caso) Chrome y yendo a chrome://inspect/ verás la nueva sesión de depuración lista para conectar. Si haces click se abrirán las herramientas de desarrollo y como hemos usado --inspect-brk la ejecución se ha detenido al principio.
  • Desde aquí podemos examinar el entorno y variables. Si continuamos con el proceso se abrirán nuestra configuración de proyecto donde podemos seguir depurando, añadiendo puntos de ruptura, examinando variables y demás.
  • Por último y aunque no pertenece a la depuración propiamente dicha, existen muchas formas de examinar los tamaños de los bundle que genera Webpack.
  • Ya sabes que (sobre todo en modo producción) lo importante es reducirlo al máximo manteniendo las mismas funcionalidades.
  • Para analizar bundles hay cientos de herramientas. Algunas se integran con el propio proceso de compilación. En mi caso quiero compartir contigo BundlePhobia, donde podrás ver el coste en tamaño cada módulo Node que quieras añadir y, más importante, el de tu propio proyecto.
  • Puedes subir tu package.json y BundlePhobia te indicará a quién pertenece el mayor impacto de tamaño.
  • Interesante, ¿verdad?.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue