19 de abril de 2020
Webpack | Introducción y configuración básica | tutorial práctico
En este video muestro qué es Webpack, los problemas que viene a resolver así como las 5 configuraciones básicas que usamos comúnmente al utilizar este empaquetador (entry, output, loaders, plugins y mode).
👨💻 Todo esto mediante un ejemplo escrito en JavaScript que vamos a empaquetar con el uso de Webpack y el gestor de paquetes npm.
✅ Contenido:
Qué es Webpack, los problemas que viene a resolver
Deficiencias al usar JavaScript sin un empaquetador
Instalación de Nodejs, npm y webpack
Refactorizar a módulos
Configurar y ejecutar scripts
Configurar entry
Configurar output
Configurar loaders (style-loader, css-loader)
Configurar plugins (HtmlWebpackPlugin)
Configurar mode
Resumen
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
👍 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐤Sígueme en twitter:
https://twitter.com/ymulenll
📌Enlaces:
Pueden encontrar el proyecto de ejemplo en su estado inicial y final (diferentes branches) en el siguiente enlace:
https://github.com/ymulenll/webpack-basics
Para usar Webpack debemos tener instalado Nodejs que lo pueden encontrar en:
https://nodejs.org/
Espero que les sea de utilidad este tutorial, cualquier consulta déjenla en los comentarios, dentro de poco estaré subiendo otros videos relacionados con el tema.
👨💻 Todo esto mediante un ejemplo escrito en JavaScript que vamos a empaquetar con el uso de Webpack y el gestor de paquetes npm.
✅ Contenido:
Qué es Webpack, los problemas que viene a resolver
Deficiencias al usar JavaScript sin un empaquetador
Instalación de Nodejs, npm y webpack
Refactorizar a módulos
Configurar y ejecutar scripts
Configurar entry
Configurar output
Configurar loaders (style-loader, css-loader)
Configurar plugins (HtmlWebpackPlugin)
Configurar mode
Resumen
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
👍 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_confirmation=1
🐤Sígueme en twitter:
https://twitter.com/ymulenll
📌Enlaces:
Pueden encontrar el proyecto de ejemplo en su estado inicial y final (diferentes branches) en el siguiente enlace:
https://github.com/ymulenll/webpack-basics
Para usar Webpack debemos tener instalado Nodejs que lo pueden encontrar en:
https://nodejs.org/
Espero que les sea de utilidad este tutorial, cualquier consulta déjenla en los comentarios, dentro de poco estaré subiendo otros videos relacionados con el tema.