Curso de Webpack básico

¿Quieres comenzar a utilizar Webpack desde cero? Este curso de Webpack básico es la mejor forma de hacerlo, ya que combina la formación puramente teórica con un desarrollo práctico.

Realizar este curso de Webpack te permitirá aprender a manejar este potente empaquetador de módulos, cada vez más presente en todo lo relacionado con el desarrollo web.

Para realizar este curso hemos empleado las últimas versiones tanto Webpack 4 como de Webpack CLI, así podrás conocer las nuevas funcionalidades que se han incorporado.

Si te animas a realizar el curso, antes de entrar en materia podrás ver una introducción en el que vas a conocer qué aprenderás en el curso, cómo se desarrollará el mismo, los conocimientos previos necesarios y el entorno de desarrollo que se utilizará, además de conocer quién es el profesor que lo imparte y su experiencia con Webpack.

A continuación pasaremos al primer bloque formativo, el cual se centra en detallar los conceptos básicos y fundamentos de Webpack para que puedas ir conociendo los mismos. Este bloque se compone de varias lecciones, comenzando por una que sirve como introducción a Webpack, en la que veras qué es Webpack, su sistema de módulos, sus componentes, su configuración y el hot module replacement.

Dentro de este bloque aprenderás también a instalar Webpack desde cero, para continuar viendo cómo generar un primer bundle y también cómo configurar Webpack con sus ficheros de configuración.

Tras estos primeros pasos vamos a enseñarte cómo funciona este empaquetador de forma básica. Te detallaremos qué es entry y output y cómo los interpreta Webpack, cómo funciona el proceso de ejecución y los tipos de ficheros soportados por este sistema.

Seguidamente te hablaremos sobre la configuración múltiple, qué es y por qué resulta tan importante, a cambiar entre las diferentes configuraciones y te explicaremos dos conceptos relacionados, como son las variables de entorno y el denominado Webpack mode. Al acabar haremos una práctica para realizar una configuración múltiple de forma guiada, así podrás ver más claramente el concepto.

Para finalizar este primer bloque te proponemos un reto, en el que puedes practicar todo lo visto anteriormente, es decir, para que realices la instalación de Webpack, su posterior configuración y la creación de un proyecto personal.

El segundo bloque lo dedicamos a una de las partes más importantes de Webpack, como son los Loaders. Este bloque está compuesto por diferentes lecciones, en las que irás viendo desde qué es un Loader o cómo cargarlo, hasta conocer los diferentes tipos que existen y ver de forma práctica cómo cargarlos.

Una vez completadas todas estas lecciones, el tutor del curso te propondrá otro reto, para que de nuevo practiques con todo lo aprendido durante el mismo. En esta ocasión el reto consiste en instalar el loader Babel.js y configurarlo en un proyecto personal.

El curso continua con otros bloques menos extensos, pero también de gran importancia. El primero de ellos aprenderás qué son los plugins y su importancia, cómo cargarlos y conocer la lista de plugins existentes para Webpack. Al acabar tienes otro reto en el que deberás instalar y configurar algunos de ellos en tu proyecto.

Pasando ya al nuevo bloque, entrarás de lleno a conocer DevServer, el servidor de Webpack que nos va ayudar durante el desarrollo de nuestras aplicaciones. Te contaremos qué es DevServer, cómo utilizarlo, cómo configurarlo, qué es el denominado Hot Module Replacement y cómo reemplazar módulos en caliente. Al acabar te proponemos un reto para que integres HMR en tu proyecto.

Y para finalizar el curso, en la última sección irás conociendo qué es DevTool, las herramientas de desarrollo que nos ofrece Webpack. Te hablaremos sobre los problemas con las transformaciones, que son los de source maps y sus tipos.

Puedes comprobar que es un curso de inicialización a Webpack muy completo y centrado en una formación no solo teórica, sino que tiene mucha práctica para que seas capaz de comprender y aprender todos los conceptos de una forma más sencilla.