©2023 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, 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.