Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Webpack: ¿Qué es source maps?

Pablo Fernandez
  • Escrito por Pablo Fernandez el 18 de Febrero de 2019
  • 2 min de lectura | Desarrollo Web
Webpack: ¿Qué es source maps?
El reproductor de video será cargado en breves instantes.

Qué es source maps

En Webpack cuando estamos aplicando una serie de loaders o de transformaciones a nuestro código, este código que genera esas transformaciones en un código que difiere mucho del que nosotros hemos programado. Por este motivo el debugging de este código se convierte en un problema, puesto que nos vamos a encontrar un código que no es el nuestro y que es generado automáticamente por Webpack. Es en estos casos dónde se emplean lo que se conoce como source maps, que es un mapeo que se realiza entre el código original y el código transformado, tanto para archivos JavaScript como para archivos CSS. De esta forma podremos debuggear tranquilamente nuestro código.

Tipos de source maps

Existen diferentes tipos de source maps:

  • Inline: En los que la información de este mapeo es agregada directamente a los ficheros generados por Webpack, es decir, va a estar todo incluido en el mismo bundle, con lo cual también aumenta un poco el tamaño del mismo.
  • Separate: En este caso Webpack va a emitir ficheros .map específicos para estos mapeos del código generado, por lo que están separados del bundle, por lo que el mismo va a tener un menor tamaño.

El tipo Inline resulta mejor opción para desarrollo. De hecho si utilizamos la opción de modo de desarrollo (development mode) en Webpack, que podemos configurar manualmente o a través del archivo de configuración, automáticamente van a ser de este tipo los source maps que se generen.

En cambio, el tipo Separate es mejor para producción, porque cuando llevemos la aplicación a producción, podemos separar los source maps y así tener la aplicación desplegada sin necesidad de tener source maps en el mismo sitio. Si ocurre cualquier error, podemos subir manualmente los source maps, hacer el debugging y bajarlos, de tal forma que el usuario no se vea obligado a bajarse estos ficheros.

Diferentes source maps

Dentro de los dos tipos principales de source maps, existen diferentes source maps que podemos utilizar en Webpack, tanto en Inline como en Separate, y cada uno ofrece unas ventajas y unos inconvenientes.

Normalmente las variables que se manejan en ellos es la calidad del código que vamos a ver para poder debuggearlo y la performance con la que estos se van a generar.

Los que existen dentro del tipo Inline son los siguientes:

Por defecto el que genera el development mode o modo de desarrollo es el tipo eval, que es bastante rápido de generar pero lo que obtenemos al final es código generado, es decir, vamos a estar viendo código de Webpack.

Si el código generado es sencillo, podremos debuggearlo bien, pero si el código es más complejo este paso se nos puede hacer bastante problemático.

El tipo cheap-eval-source-map no es muy rápido y nos devuelve el código transformado, es decir, código que al final ha pasado por los transformadores y por los loaders. Si no estamos utilizando ninguna transformación de código para JavaScript, podemos utilizarlo, ya que ese código va a ser similar al generado, ya que el JavaScript no se ha pasado por ninguna transformación.

El tipo cheap-module-eval-source-map es similar al anterior, pero tiene un performance medio y además devuelve el código original, es decir, nuestro propio código, el que nosotros hemos creado. Es el tipo recomendado en la página oficial de Webpack, ya que es el que mejor relación calidad-performance tiene.

En cuanto a los tipos que tenemos dentro de los Separate son estos:

Podemos ir utilizando uno u otro dependiendo de nuestras necesidades, ya que en este caso no hay ninguno recomendado como tal, porque depende de cómo va a empaquetarse nuestra aplicación en producción.

Si quieres avanzar y profundizar sobre Webpack puedes hacer el Curso de Webpack intermedio en el que aprenderás a estructurar los ficheros de configuración y a configurar un proyecto para su puesta en producción aplicando optimizaciones y utilizando propiedades nuevas que se impartieron en el curso básico.

curso-webpack-intermedio

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Qué es un Loader en Webpack

Qué es un Loader en Webpack

Desarrollo móvil

13 de Febrero de 2019

En este video te contamos qué es un Loader en Webpack, sus funciones principales y cómo se cargan.

Programador JavaScript Profesional

Programador JavaScript Profesional

carrera

Incluye 8 cursos:

  • Curso de JavaScript Profesional
  • Curso de Angular 4
  • Curso de React JS

y 5 cursos más!

Duración: 47 horas y 58 minutos

Curso de Webpack básico

Curso de Webpack básico

curso

Con este curso aprenderás:

  • Aprenderás los conceptos básicos de webpack.
  • Podrás usar webpack en un proyecto nuevo o en uno ya existente.
  • Aprenderás que es un loader en webpack y cómo utilizarlos.

Duración: 2 horas y 51 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars