Webpack es una herramienta poderosa para construir aplicaciones modernas de JavaScript, pero su arquitectura puede ser compleja y desalentadora para los desarrolladores que son nuevos en ella. En esta charla, nos sumergiremos en el funcionamiento interno de Webpack y exploraremos cómo sus diversos componentes trabajan juntos para crear un paquete.
Al final de esta charla, tendrás una comprensión integral de la arquitectura de Webpack y su sistema de plugins. Estarás equipado con el conocimiento para construir aplicaciones complejas usando Webpack con confianza.
La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura
FAQ
El compilador es el núcleo central de Webpack, responsable de iniciar y detener los procesos, gestionar el gráfico de dependencias y orquestar el flujo de compilación y optimización.
Webpack es un agrupador de módulos que permite escribir módulos que funcionan en el navegador, convirtiendo código en formatos que son más eficientes y compatibles para los navegadores.
Puedes configurar Webpack definiendo un objeto de configuración con opciones de entrada y salida. También se puede usar a través de su interfaz de línea de comandos o directamente mediante la API de Node.
Los cargadores en Webpack son herramientas que permiten transformar el código de los módulos durante el proceso de compilación, como convertir archivos CSS o imágenes para que sean compatibles con el navegador.
Tappable es una biblioteca que crea ganchos para los plugins, permitiendo a los usuarios ser notificados de eventos importantes y ejecutar código. Es esencial en la arquitectura de plugins de Webpack.
Para crear un plugin en Webpack, se define una clase que acepta un método 'apply'. Este tiene acceso al objeto del compilador, permitiendo manipular varias fases del proceso de compilación mediante el uso de ganchos.
Video Summary and Transcription
1. Introducción a Webpack
Hola a todos, bienvenidos a mi charla sobre la anatomía de Webpack. Webpack es un agrupador de módulos que te permite escribir módulos para el navegador. Toma tu código y lo convierte en un formato que los navegadores pueden leer. Puedes usar Webpack a través de la configuración, la interfaz de línea de comandos o la API de Node. Webpack comienza con un archivo de configuración, lee tus archivos de entrada y crea un gráfico de dependencias. Luego aplica cargadores para transformar el código.
Hola a todos, bienvenidos a mi charla, la anatomía de Webpack, una deep dive en su architecture. Un poco sobre mí, soy un ingeniero de front end en Razorpay y me encanta el código abierto. He estado involucrado en el código abierto durante casi tres años y he estado ayudando en el mantenimiento y desarrollo de los ecosistemas de ESLint y Webpack. También soy un gran fan de los animes, particularmente One Piece y puedes encontrarme en internet como snitin315.
Así que vamos a sumergirnos en nuestra charla. Empecemos con qué es Webpack. Como todos sabemos, Webpack es un agrupador de módulos. Otra forma de explicar Webpack es que te permite escribir modules que funcionan en el navegador. Entonces, ¿qué significa eso? Escribimos cosas que son agradables para nosotros escribir y luego Webpack toma todo ese código y lo convierte en cosas que son agradables para los navegadores leer. ¿Entonces, qué significa eso? Agradable para ti escribir significa fácil para los desarrolladores leer, puede estar separado en varios archivos, múltiples repositorios. Podría estar en un lenguaje que los navegadores no pueden entender, ES6, TypeScript, etc. Lo que sería agradable para los navegadores leer sería ES5, solicitudes frecuentes, respuestas más pequeñas.
Entonces, ¿cómo usamos Webpack? Puedes usar Webpack a través de la configuración. Puedes definir un objeto de configuración con entrada y salida. Y también puedes usar Webpack a través de su interfaz de línea de comandos. Puedes, en CLI, simplemente pasar Webpack, guión, guión entrada, parte a tu archivo de entrada y luego guión, guión salida, guión nombre de archivo, el nombre de archivo de tu paquete. También puedes usar el comando del servidor Webpack que iniciará un servidor de desarrollo local para ti. O puedes usar directamente la API de Node y simplemente requerir Webpack de tus modules de Node y pasar dos argumentos. El primer argumento son los objetos de configuración, el segundo es un callback.
Veamos una visión general de cómo funcionan las cosas para Webpack bajo el capó. Comenzamos con un archivo de configuración de Webpack. Aquí es donde especificas cómo debe comportarse Webpack cuando se ejecuta, incluyendo opciones como puntos de entrada, directorio de salida, plugins, cargadores, todo, optimizaciones, luego Webpack lee tus archivos de entrada. Y estos son los archivos que Webpack usa para comenzar a construir tu gráfico de dependencias. Webpack analizará el código en estos archivos y seguirá cualquier dependencia que encuentre a otros archivos en tus aplicaciones. Luego crea el gráfico de dependencias, que no es más que analizar qué módulo se mapea a otro módulo. Relaciones, básicamente relaciones entre cada modules. Luego aplica los cargadores y transformaciones. Webpack usa cargadores para transformar el código en cada módulo. Por ejemplo, hay un archivo no javascript que quieres analizar a través de Webpack. Tendrás que usar un cargador.
2. Arquitectura de Plugins de Webpack y Tappable
Webpack maneja la salida compilada creando un archivo de paquete. La arquitectura de plugins de Webpack, construida con Tappable, permite a los usuarios acceder a los ganchos que notifican y ejecutan código para eventos importantes. Los ganchos pueden ser creados con Tappable importando un gancho sincrónico y definiéndolos en el constructor. Acceder a los ganchos se hace usando el método tap, con el nombre del plugin y una función de callback como argumentos.
Podría ser un archivo CSS, podría ser un archivo PNG. Luego, cuando todo está compilado, crea una salida compilada. Entonces, después de que Webpack ha procesado todos los modules, produce un solo archivo que se llama un paquete. Y luego, según la gestión de salida, configuramos cómo queremos que Webpack maneje este archivo de paquete. Como por ejemplo, dónde en el disco queremos escribir este archivo.
Así que en Webpack, todo es un plugin. Entonces, ¿qué significa eso? Más del 80% de la base de código de Webpack está construida con su propia architecture de plugins. Pero antes de aprender más sobre los plugins, necesitamos saber sobre Tappable. Entonces, ¿qué es Tappable? Tappable es una biblioteca que crea ganchos para los plugins. Es creada y mantenida solo por el equipo de Webpack. Y es la columna vertebral del sistema de plugins de Webpack.
Entonces, ¿qué son los ganchos? Los ganchos permiten a otros usuarios ser notificados de eventos importantes y ejecutar el código del otro usuario cuando ocurre algún evento importante. Por ejemplo, el navegador expone muchos ganchos para que podamos acceder a ellos. Por ejemplo, este es un gancho básico, document.addEventListener on click. Así que cada vez que un usuario hace clic en la pantalla, se imprime un mensaje en la consola. Así que de manera similar, Webpack expone muchos ganchos a los que puedes acceder. Y, ¿cómo creamos ganchos con Tappable? Así que puedes simplemente importar un gancho sincrónico de Tappable y en el constructor de tu clase, puedes definir una propiedad This.hooks en la que redefines todos los ganchos.
Entonces, ¿cómo crear ganchos con Tappable? Sí, así es como creamos un gancho. Así que por ejemplo, en este ejemplo, tenemos una clase Car en la que tenemos un constructor en donde hemos definido nuestros ganchos a través de This.hooks. Tenemos dos ganchos, uno es CarStarted y el otro es radioChanged. Así que cada vez que queramos llamar a este gancho, podemos simplemente ejecutar su método call. Por ejemplo, tenemos un método turn on donde podemos hacer This.hooks.carStarted.call y cada vez que llamamos al gancho turn on, este gancho CarStarted será activado. Sí, pero ¿cómo accedemos al gancho? Para acceder al gancho ejecutamos su método tap. Así que por ejemplo, en el ejemplo anterior, inicializamos una nueva instancia de myCar. Ahora podemos hacer myCar.hooks.CarStarted.tap y el primer argumento es el nombre del plugin y este nombre se utiliza para fines de depuración. Y el segundo argumento es una función de callback. Esta se llama cuando se llama a tu gancho. Así que cada vez que hagas, ejecutarás myCar.turnOn y se imprimirá CarStarted. De manera similar, también puedes pasar opciones a tus plugins.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments