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
Intermedio
12 Clases 9 h
59€
49€
Precio en promoción
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

  • Uso sin archivo de configuración
  • Modos: producción y desarrollo
  • Transpilando Javascript +ES6 con Babel
  • Inyección de JS en HTML
  • Extracción de CSS
  • Servidor Web de Desarrollo
  • 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
  • Desarrollando una aplicación Webpack con VanillaJS
  • Webpack Code Splitting
  • Partir bundles en pedazos menores para optimizar la descarga
  • Incluir Web Components en los proyectos

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

Webpack es una herramienta que nos ayuda a cubrir diversas necesidades del desarrollo moderno. Originalmente es un software de empaquetado de código, capaz de crear, compactar y optimizar los archivos Javascript que se usarán en producción. Sin embargo, el uso de esta herramienta ha trascendido a varios niveles, permitiendo diversos tipos de operativas para mejorar los flujos de trabajo, automatizando varios tipos de tareas habituales en el desarrollo web, para conseguir al final una experiencia de desarrollo optimizada.

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

Introduccion a Webpack
  • 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.
Primeros pasos para usar Webpack

Instalación de Webpack y creación de nuestras primeras secuencias de comandos para usarlo

Transpilado con Babel y Webpack
  • 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.
El archivo de configuración webpack.config.js
  • Configuración en Webpack por medio del archivo webpack.config.js.
  • Elementos de todo archivo webpack config.
HTML Loader de Webpack

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.

Extracción del CSS
  • 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 crear un servidor de desarrollo con Webpack
  • 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.
Preguntas finales y plan de estudio para el resto del curso

Resumen de contenidos Webpack

Configuración de 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
Flujo de trabajo con VanillaJS, React, VueJS y Typescript
  • Kit de inicio para VanillaJS
  • Kit de inicio para React
  • Kit de inicio para Vue.js
  • Kit de inicio para TypeScript
Desarrollando una aplicación Webpack con Javascript

Desarrollo de una aplicación web con Javascript puro en la que llevamos a cabo un to do list

Webpack Code Splitting

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

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete