La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura

Rate this content
Bookmark

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.

15 min
12 Dec, 2023

AI Generated Video Summary

Webpack es un agrupador de módulos que convierte el código en un formato que los navegadores pueden leer. Tiene una arquitectura de plugins construida con Tappable que permite a los usuarios aprovechar los ganchos para eventos importantes. Instancias Tappable como el compilador y la compilación se pueden utilizar para aprovechar los ganchos. El resolutor en Webpack se utiliza para verificar si existen las rutas requeridas y puede modificar archivos que no son de JavaScript utilizando cargadores.

1. Introducción a Webpack

Short description:

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

Short description:

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.

3. Instancias Tappable y Plugins de Webpack

Short description:

En esta parte, exploramos las instancias tappable de Webpack, como el compilador y la compilación. Aprendemos cómo acceder a los ganchos como compilation.hooks.SEAL y compilation.hooks.optimized. Además, observamos un ejemplo de un plugin básico utilizando la clase HelloCompilationPlugin. El compilador es el despacho central de nivel superior para Webpack, mientras que la compilación representa el gráfico de dependencia.

Así que aquí puedes ver myCar.hooks.radioChange.tab un plugin de radio y hemos pasado una opción de estación de radio y estamos registrando el cambio de radio a la estación de radio. Así que si llamas a myCar.setRadioStation con 100.10 imprimirá cambio de radio a 100.10.

Ahora aprendamos más sobre las instancias tappable de Webpack. Así que Webpack expone muchas instancias tappable. Por ejemplo, estas son dos de las instancias tappable. Una es el compilador y la otra es la compilación. Así que aquí el dibujo muestra que para acceder al gancho de compilación primero necesitamos acceder al gancho del compilador. Así que hacemos compiler.hooks.compilation.tap luego la compilación ofrece otros ganchos para que los usemos por ejemplo SEAL. Así que harás compilation.hooks.SEAL.tap. Estos son los ganchos que son utilizados por los plugins. Así que SEAL se utiliza cuando toda la compilación está hecha. Optimize se utiliza por ejemplo cuando se inicia la optimización de los activos. Y puedes usarlo justo antes de que se inicie el hashing en el proceso de Webpack.

Así que este es un ejemplo básico de un plugin. Así que definimos una clase HelloCompilationPlugin que acepta un método apply. Ahora que tiene acceso al objeto del compilador con el que puedes acceder a la compilación compiler.hooks.compilation.tab luego de nuevo tienes el nombre del plugin y el callback acepta el argumento de compilación. Luego a través de la compilación, puedes acceder a los otros ganchos como optimize. Ahora podemos acceder a varios ganchos disponibles a través de la compilación. Así que aquí estamos accediendo a optimize it compilation.hooks.optimized.tab hello compilation plugin y simplemente estamos registrando que los activos están siendo optimizados. Así que esta es una visión general de cómo se ve un plugin básico. Así que la primera instancia tappable es el compilador. Así que es el despacho central de nivel superior para webpack. Básicamente inicia y detiene los procesos de webpack y esto es lo que exponemos donde la API de nodo. Así que cada vez que requieres un webpack, te da acceso al compilador. Así que el primer argumento es un objeto de configuración. El segundo argumento es un callback. Así que lo que sea que sea devuelto por esta llamada a la función es la instancia del compilador. Luego viene la compilación. Así que la compilación es creada por el compilador solamente y esto también es conocido como el gráfico de dependencia. Es el cerebro de Webpack donde Webpack inicia la construcción del gráfico, sellándolo y renderizándolo en paquetes.

4. Compilación de Webpack y Resolutor

Short description:

Dentro del objeto de compilación, Webpack utiliza el resolutor para verificar si existen las rutas requeridas. El resolutor devuelve un objeto con detalles como la ruta y el contexto. Si el archivo no es de JavaScript, Webpack busca un cargador en la configuración. Si se encuentra, el CSS se pasa a través del cargador y se devuelve el estado modificado.

Todo sucede dentro del objeto de compilación. Luego tenemos el resolutor. Así que siempre que hemos requerido alguna ruta en el código base, Webpack verifica si esa ruta realmente existe o no. Así que el resolutor se encarga de la resolución. Aquí. Así que siempre que nos encontramos con una declaración de importación o una declaración requerida, pasa por el resolutor. Comprueba si el archivo realmente existe y luego devuelve un objeto con algunos detalles relacionados. Como la ruta, el contexto. Y si es un archivo no JavaScript, por ejemplo, digamos foo.css. Entonces comprobará tu configuración de webpack si has definido un cargador respectivo para la extensión CSS. Si no, lanzará un error. Si hay un cargador que has especificado, pasará el CSS a través de ese cargador y devolverá el estado modificado. Luego tenemos las fábricas de módulos. Las fábricas de módulos no son más que toma un objeto y lo convierte en otro objeto. Aquí lo que hacen las fábricas de módulos en webpack es toma una solicitud resuelta con éxito del resolutor y luego la convierte en otro objeto que tiene el código fuente y el nombre del archivo como sus propiedades. Simplemente recoge el código fuente, lee el archivo fuente desde la ruta y adjunta una propiedad de origen al objeto. A continuación tenemos el analizador. Así que como sugiere el nombre del analizador, simplemente analiza el código base. Así que para analizar lo que hacemos es convertir el código base, el código del archivo, del módulo, la fuente de la propiedad de origen y la convertimos en un AST para analizar. Luego encontramos todas las declaraciones requeridas y las declaraciones de importación de ese archivo y creamos dependencias, gráficos de dependencia. Creamos un objeto de módulo como este y le adjuntamos dependencias. Luego tenemos plantillas. Así que las plantillas no son más que data vinculación para nuestros modules. Crea códigos que ves en tus paquetes. Por ejemplo, aquí hay una plantilla de fragmento que tiene múltiples modules que tienen múltiples dependencias adjuntas. Así que puedes pensar en cómo creas un componente de React. Así que el JSX, el JSX general es la plantilla y el módulo y las dependencias son una especie de props. Así que repasemos lo que vimos. Tenemos un compilador que crea la compilación, luego que lee el archivo de entrada y resuelve la ruta del archivo. Si es un archivo no JavaScript pasará por el cargador y comprobará si el archivo existe, o si hemos especificado un cargador contra este archivo y devuelto el estado modificado. Luego la solicitud resuelta con éxito cuando va a la fábrica de módulos que crea un objeto de módulo a partir del código fuente de la ruta resuelta, luego pasamos ese objeto al analizador que crea un AST a partir del objeto de módulo y adjunta dependencias y luego ese objeto se pasa a la plantilla de fragmento que hace la data vinculación para los objetos de módulos pasados y genera código para bundle.js y luego simplemente se genera el archivo de paquete eso es todo lo que acabas de aprender cómo funciona internamente webpack gracias por unirte a mí

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.