Los loaders en webpack.js son uno de elementos que componen esta herramienta, que se utiliza en el desarrollo web del componente frontend, es decir, del componente que el usuario puede encontrar en un primer vistazo y que le permitirá interactuar con los elementos del sitio.

Entre todos los elementos que nos ofrece webpack.js, como la opción de import, los puntos de entry, los plugins y el output, los loaders en webpack.js son muy interesantes para la transformación de los archivos.

¿Qué encontrarás en este post?

Loaders en webpack.js

Webpack.js es un dispositivo que se resuelve como un árbol de dependencias. A partir de un punto de entrada determina cuáles son las dependencias (como index.js), las resuelve, las integra y las sitúa en el output. En la vida real, las páginas que contienen webpack verán que este dispositivo prevé la infraestructura para que se hagan transformaciones de SASS a CSS o de TypeScript a JavaScript. No obstante, nos vamos a preguntar qué elemento del webpack.js hace este trabajo, y es ahí donde aparece el loader.

Los loaders son transformaciones que puedes aplicarle al código fuente de un programa. Te permiten preprocesar los archivos cuando haces uso del comando import o load. Además, al usar este tipo de comando, puedes transformar archivos de otro tipo de lenguajes, como de TypeScript a JavaScript, así como pasar imágenes por medio de una URL.

Si quieres activar los loaders en webpack.js dentro de tu proyecto de código, solo tendrás que utilizar el comando loadername! dentro de los prefijos de require y ¡listo!

Tipos de loaders

Los loaders vienen en diferentes paquetes o tipos que nos ayuda a cumplir con un grupo de tareas. A continuación, te vamos a listar algunos de ellos:

Files

val-loader: es el que ejecuta el código y lo exporta como un código JS.
ref-loader: crea dependencias entre los archivos de forma manual.

JSON

cson-loader es el que transpila un archivo de tipo CSON.

Transpliling

babel-loader es el comando que transpila el código en ES2015+ y lo convierte en ES5 usando Babel.
esbuild-loader es el comando que transpila el código en ES2015+ y lo convierte en ES6+ usando esbuild.
buble-loader es el comando que transpila el código en ES2015+ y lo convierte en ES6 usando buble.
traceur-loader es el comando que transpila el código en ES2015+ y lo convierte en ES5 usando traceur.
ts-loader es el comando que carga TypeScrip 2.0+ como JavaScript.
coffee-loader es el comando que carga CoffeScript como JavaScript.

Templating

html-loader es el que exporta HTML como una cadena.
pug-loader es el comando que carga plantillas de pug y jade y devuelve una función.
markdown-loader es el comando que compila markdown a HTML.
react-markdown-loader es el que compila markdown a un componente de React usando el markdown parser.
posthtml-loader carga y transforma un archivo HTML usando PostHTML.
handlebars-loader compila handlebars a HTML.
twig-loader compila las plantillas de twig y devuelve una función.
remark-loader carga markdown a través del remark con una resolución de imagen built-in.

Styling

style-loader es un comando que añade exportaciones de un módulo como un estilo a DOM.
css-loader es un comando que carga archivos CSS con importaciones y devuelve código en CSS.
less-loader es el comando que carga y compila archivos en CSS.
sass-loader carga y compila archivos en SASS/SCSS.
post-css-loader es el que carga y transforma un archivo CSS/SS usando PostCSS.
stylus-loader carga y compila archivos Stylus.

Framework

vue-loader es un comando que carga y compila componentes de Vue.
angular2-template-loader carga y compila componentes de Angular.

Gracias a este artículo has aprendido acerca de los loaders en webpack.js y cómo actúan para realizar las transformaciones de archivos dentro de una serie de programas de desarrollo web. Seguramente te interesa seguir conociendo este tipo de herramientas, por lo que te queremos invitar a revisar el temario que ofrece nuestra formación intensiva en Bootcamp Desarrollo Web Full Stack.

En pocos meses, podrás recorrer todos los sectores y las herramientas que tienen que ver con el desarrollo de sitios y aplicaciones web a nivel teórico y práctico. ¿A qué estás esperando para transformar tu vida? ¡Apúntate ahora!