Qué es un Loader en Webpack
En este video te contamos qué es un Loader en Webpack, sus funciones principales y cómo se cargan.
Te contamos qué son los Source Maps en Webpack, que problemas solucionan y qué tipos podemos utilizar.
Tabla de contenidos
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.
Existen diferentes tipos de source maps:
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.
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.
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.
Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.
También te puede interesar
En este video te contamos qué es un Loader en Webpack, sus funciones principales y cómo se cargan.
Con este curso de Webpack básico aprenderás qué es Webpack y cómo utilizarlo en tus proyectos, de tal...