Desarrollo Web

Curso de Webpack básico

Con este curso de Webpack básico aprenderás qué es Webpack y cómo utilizarlo en tus proyectos, de tal forma que podamos configurar el empaquetado, el servidor de desarrollo, las tareas de automatización y mucho más desde un único lugar.

Impartido por:

4.2 (108 valoraciones)
2 horas y 51 minutos · Curso
Webpack básico

Lo que aprenderás en este curso:

  • Aprenderás los conceptos básicos de webpack.
  • Podrás usar webpack en un proyecto nuevo o en uno ya existente.
  • Aprenderás que es un loader en webpack y cómo utilizarlos.
  • Utilizarás herramientas que mejorarán tu experiencia como programador.
  • Podrás transpilar tu código Javascript.
  • Te familiarizas con paquetes útiles de Nodejs.
  • Aprenderás a cargar plugins dentro de webpack.
  • Utilizarás Webpack dev server para crear un servidor de desarrollo.

Requisitos del curso

Ya que Webpack es una tecnología de empaquetado de módulos Javascript, se recomienda tener una base de JavaScript, no importa el estándar. Si no tienes dichos conocimientos, en nuestro catálogo dispones de un Curso de JavaScript Profesional donde podrás adquirirlos.

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.3
108 valoraciones

Contenido del curso:

    • 6m
    • Entorno de desarrollo
      2m
    • Introducción a webpack
      9m
    • Instalación de webpack
      10m
    • Primeros pasos: Generar un bundle
      9m
    • Nuestro primer webpack.config
      8m
    • ¿Cómo funciona webpack?
      9m
    • Configuración múltiple
      5m
    • Práctica: Configuración múltiple
      10m
    • RETO: Instala y configura webpack en un proyecto personal
      1m
    • Introducción a loaders
      6m
    • CSS Loader
      8m
    • Sass Loader
      7m
    • Less Loader
      4m
    • Imágenes en webpack
      12m
    • Fuentes en webpack
      5m
    • 4m
    • RETO: Instala y configura Babel.js en un proyecto personal
      1m
    • Plugins
      9m
    • RETO: Instala y configura algunos plugins en tu proyecto
      1m
    • ¿Qué es webpack DevServer?
      9m
    • Reemplazar módulos calientes
      8m
    • Configuración de DevServer
      5m
    • RETO: Integra HMR en tu proyecto
      1m
    • Conociendo DevTool
      9m
    • Despedida
      1m
También te puede interesar

Te dejamos una selección de cursos, carreras y artículos

Dominando Vue

Dominando Vue: De los fundamentos a la gestión de estado global

5 horas y 5 minutos · Curso

Este curso es una inmersión en Vue 3 y todo lo que nos ofrece la última versión del popular framework de JavaScript para la construcción …

  • Desarrollo Web
Vue en la práctica

Vue en la práctica: Desarrollo de una aplicación de lista de compras

3 horas y 20 minutos · Curso

Este curso es un estudio práctico de Vue 3 a través del desarrollo de una aplicación de lista de compras. Los participantes trabajarán en cada …

  • Desarrollo Web

Dudas frecuentes

1

¿Cuándo comienza la formación?

En OpenWebinars las formaciones no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

2

¿Cuál es el precio?

En OpenWebinars no vendemos formaciones.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todas las formaciones de la plataforma y a las nuevas que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

3

¿Obtengo un diploma de certificación?

En todos los cursos existe un examen final para evaluar tus conocimientos adquiridos. Si superas este examen con más de un 80% de preguntas correctas obtendrás el diploma de certificación. Puedes realizar un intento cada 24 horas.

Este diploma es un certificado privado emitido por OpenWebinars, y valorado en el mundo empresarial, ya que tenemos grandes compañías clientes que se forman con nosotros y valoran nuestras certificaciones.

No olvides poner tu certificación en tu perfil Linkedin y en tu currículum.

¿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.

Artículos
Ver todos