©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Webpack
Domina la herramienta imprescindible para el desarrollo profesional con el que empaquetar tus módulos logrando un código organizado y optimizado.
Material disponible
Con este Curso de Webpack hemos reunido en un mismo temario todos aquellos aspectos que te van a permitir aprender a usar, paso a paso y de una forma práctica, una potente herramienta con la que empaquetar código y automatizar diversos tipos de tareas. Webpack es una de las herramientas más representativas en el desarrollo frontend de la actualidad. Si quieres dominarla y sacarle el mayor partido a Webpack en todo tipo de proyectos, este curso es para ti.
Qué es Webpack ?
Webpack ha sido capaz de dejar atrás interesantes tecnologías como Grunt, Gulp, Browserify o Bower. Este poderoso sistema de bundling o de empaquetado nos permite generar un archivo único javascript con todos aquellos módulos que necesita tu aplicación para funcionar. Además Webpack prepara tu aplicación web para producción, compila archivos de preprocesadores CSS como Sass, transpila código ES6, optimiza la experiencia de los usuarios de las aplicaciones, creando múltiples paquetes que se pueden cargar dinámicamente en tiempo de ejecución según sus necesidades (code splitting). Por si fuera poco, dispone de un servidor de desarrollo que vigila y recarga la página cuando se producen cambios en el código y ofrece múltiples y avanzadas posibilidades a la hora de automatizar tareas. Es una herramienta de build "todo-terreno".
Como prueba de las posibilidades de Webpack cabe decir que es una de las piezas fundamentales que usan diversos frameworks como Angular, React o las herramientas de Laravel para facilitar desarrollo frontend.
Qué aprenderé en el Curso de Webpack
Objetivos del curso
El objetivo del curso de Webpack es mejorar tu experiencia en la creación de aplicaciones web, mediante el dominio de una herramienta imprescindible para el desarrollo profesional, en un panorama de constante incremento de las exigencias de los proyectos y aplicaciones a los que nos enfrentamos.
Durante el curso se explicarán de manera práctica las diferentes utilidades de esta herramienta para completar con el desarrollo básico de una aplicación Webpack con VanillaJS.
Por qué debes aprender Webpack
Qué tengo que saber
Las personas que quieran realizar esta formación deben tener conocimientos previos en Javascript, HTML y CSS. Además para sacar el mayor rendimiento se recomiendan nociones de node.js y conocimientos de algún task builder como grunt o gulp.
Clases y contenidos
Webpack 5
En estos vídeos cortos presentamos Webpack con su versión 5. En ellos se ofrecen las claves más importantes para aprender a manejar la herramienta frontend para la compilación de Javascript, CSS y la gestión del servidor de desarrollo.
En estos vídeos iremos directamente a la parte práctica de uso de Webpack. En este vídeo veremos cómo se instala webpack en un proyecto, como dependencia de desarrollo y cómo dar los primeros pasos para usar Webpack en general sin necesidad de realizar ningún tipo de configuración al proyecto.
En este vídeo aprenderemos a configurar Webpack haciendo uso del archivo webpack.config.js. Veremos cómo indicar configuraciones comunes como el entry o el output. Además veremos cómo crear scripts npm para automatizar el funcionamiento de Webpack por comandos.
En este vídeo aprenderemos cómo lidiar con archivos HTML, de modo que podamos inyectar los archivos de código Javascript, mediante la correspondiente etiqueta script. Veremos cómo realizar algunas cosas muy útiles como configurar el código HTML con los template parameters o crear un hash para invalidar la caché del navegador.
Cómo levantar un servidor con Webpack, solamente para la etapa de desarrollo, que nos permita ver los archivos de nuestras aplicaciones y poder hacer el live-reload. También veremos algunas configuraciones del servidor de desarrollo como cambiar el puerto.
En este vídeo vamos a ver un plugin de Webpack llamado copy-webpack-plugin, muy útil cuando tenemos varios archivos estáticos y queremos que se muevan a la carpeta de producción al hacer el build del proyecto.
En esta clase vamos a explicar qué es el traspilado y por qué lo necesitamos. Explicaremos qué es Babel, la herramienta que nos sirve para transformar el código Javascript y qué es el babel-loader, el puente entre Webpack y Babel. Veremos las configuraciones básicas para el transpilado de Javascript.
Explicaciones más detalladas sobre cómo realizar la configuración de la transpilación de Javascript a través de los presets de Babel, de modo que podamos decidir de manera exacta qué navegadores objetivo son los que queremos soportar en los bundles producidos.
A veces tenemos que actualizar el package de Caniuse de Browserlists para que los presets de Babel para el compilado de los bundles Javascript se ajusten a las versiones de los navegadores actuales.
Una de las tareas habituales para las que se usa Webpack es el procesado del CSS, de modo que podamos optimizarlo o preprocesarlo. En este vídeo vamos a ver cómo debemos trabajar con el código CSS para que lo procese Webpack.
Una de las más importantes utilidades para el trabajo con CSS es su minimización. Con ello conseguimos optimizar el CSS para que ocupe menos espacio. Veremos cómo realizarlo con Webpack.
Cómo realizar el preprocesamiento del código Sass para convertirlo en código CSS, usando Webpack.
Unas breves notas sobre el resto del Curso de Webpack que tienes en las clases a continuación.
Webpack, uso y primeros pasos
- Conceptos de Webpack para saber qué es esta herramienta y en qué casos la podemos usar.
- Puntos de entrada, de salida, los cargadores y los plugin.
Instalación de Webpack y creación de nuestras primeras secuencias de comandos para usarlo
- Loaders de Webpack, qué son y cómo trabajan para transformar nuestro código.
- Primer ejemplo con el loader de Babel, que nos sirve para transpilar el código Javascript.
- Configuración en Webpack por medio del archivo webpack.config.js.
- Elementos de todo archivo webpack config.
Transformación (y minimizado) del código HTML con HTML Loader de Webpack para poder inyectar dinámicamente el código de nuestro bundle de Javascript generado.
- Cómo cargar CSS en nuestro proyecto, e inyectar también en el HTML de salida el link con la hoja de estilo.
- Extraer el CSS que haya en los archivos de Javascript, ya que en librerías como Vue o React es muy típico que ese CSS esté incluido en el Javascript y quitarlo será una buena práctica, para inyectarlo como un CSS común.
- Cómo levantar un servidor de desarrollo con Webpack, de modo que puedas probar las páginas y aplicaciones que estás desarrollando.
- Módulo adicional webpack-dev-server.
Resumen de contenidos Webpack
Configuración de Webpack
- Configuración de JSON
- Configuración de Sass
- Configuración de PostCSS y Autoprefixer
- Soporte de Urls en CSS y SASS
- Optimización de imágenes
- Configuración de archivos estáticos
- Múltiples puntos de entrada y salida
- Kit de inicio para VanillaJS
- Kit de inicio para React
- Kit de inicio para Vue.js
- Kit de inicio para TypeScript
Desarrollo de una aplicación web con Javascript puro en la que llevamos a cabo un to do list
Code Splitting una técnica para dividir el código y mejorar el rendimiento de una aplicación
Valoraciones
jon
Pedro
Alvaro Ramirez Castillo
Eugeni regi
Carlos Cusi
Muy bueno, muy bien explicado. Me ha servido para iniciarme en el mundo del Webpack, sin embargo tengo que destacar que es un curso del año 2018 y hace referencia a Webpack 4, ya hace unos días que Webpack está en la versión 5 y han cambiado muchas cosas. Quizás sería un buen momento para actualizarlo.
Jorge Oscar Gianotti
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.