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

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.

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.

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.

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í