search
CursosEmpresasBlogLiveConfPrecios
Curso de TypeScript 3

Webpack y agrupación de Módulos

Curso de TypeScript 3

Contenido del curso

Introducción a TypeScript

  • 1
    El lenguaje de programación TypeScript

    El lenguaje de programación TypeScript

    08:43 min
  • 2
    Instalación de herramientas para TypeScript

    Instalación de herramientas para TypeScript

    05:47 min
  • 3
    Instalación de herramientas en Windows

    Instalación de herramientas en Windows

    01:05 min
  • 4
    Navegación y refactorización

    Navegación y refactorización

    04:37 min

Entorno de Desarrollo

  • 5
    El compilador de TypeScript

    El compilador de TypeScript

    08:00 min
  • 6
    El archivo de configuración de TypeScript

    El archivo de configuración de TypeScript

    07:22 min
  • 7
    Mi primer proyecto TypeScript

    Mi primer proyecto TypeScript

    05:09 min

Tipos en TypeScript

  • 8
    Tipado en TypeScript

    Tipado en TypeScript

    01:37 min
  • 9
    Number, Boolean y String

    Number, Boolean y String

    14:09 min
  • 10
    Any

    Any

    08:28 min
  • 11
    Void y never

    Void y never

    15:58 min
  • 12
    null y undefined

    null y undefined

    11:03 min
  • 13
    Object

    Object

    07:44 min
  • 14
    Array

    Array

    09:44 min
  • 15
    Tupla

    Tupla

    11:25 min
  • 16
    Enum

    Enum

    10:59 min
  • 17
    Unión de Tipos, Alias y Tipos Literales

    Unión de Tipos, Alias y Tipos Literales

    11:58 min
  • 18
    Aserciones de tipo

    Aserciones de tipo

    11:26 min
  • 19
    Funciones en TypeScript

    Funciones en TypeScript

    14:19 min
  • 20
    Resumen

    Resumen

    06:54 min

Tipos Personalizados

  • 21
    Interfaces

    Interfaces

    10:18 min
  • 22
    Interfaces: propiedades opcionales

    Interfaces: propiedades opcionales

    10:57 min
  • 23
    Extensión de interfaces

    Extensión de interfaces

    10:54 min
  • 24
    Clases

    Clases

    14:02 min
  • 25
    Clases públicas y privadas

    Clases públicas y privadas

    15:10 min
  • 26
    Métodos Get y Set

    Métodos Get y Set

    08:46 min
  • 27
    Herencia de clases y propiedades estáticas

    Herencia de clases y propiedades estáticas

    17:41 min
  • 28
    Resumen

    Resumen

    13:24 min

Módulos

  • 29
    Principios de responsabilidad única

    Principios de responsabilidad única

    15:03 min
  • 30
    Resolviendo módulos

    Resolviendo módulos

    10:04 min
  • 31
    Webpack y agrupación de Módulos

    Webpack y agrupación de Módulos

    Viendo ahora

Cierre

  • 32
    Cierre

    Cierre

    00:57 min
schoolTomar examen

Webpack y agrupación de Módulos

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios27

Juan Enrique Rodriguez Garcia

Juan Enrique Rodriguez Garcia

Estudiante
Hace 6 años
    Jose Daniel Barría Reyes

    Jose Daniel Barría Reyes

    Estudiante
    Hace 6 años
    Miguel Ángel Jancko Gutiérrez

    Miguel Ángel Jancko Gutiérrez

    Estudiante
    Hace 5 años
Raul Hernández

Raul Hernández

Estudiante
Hace 6 años
    José Antonio Torres

    José Antonio Torres

    Estudiante
    Hace 5 años
    Jimmy Buriticá Londoño

    Jimmy Buriticá Londoño

    Estudiante
    Hace 5 años
Omar Fernando López Olivas

Omar Fernando López Olivas

Estudiante
Hace 6 años
    Jose Daniel Barría Reyes

    Jose Daniel Barría Reyes

    Estudiante
    Hace 6 años
    Luis Abdel Rangel Castro

    Luis Abdel Rangel Castro

    Estudiante
    Hace 6 años
Derick Robinson

Derick Robinson

Estudiante
Hace 5 años
    Edgar Andrés Angrino Lafaux

    Edgar Andrés Angrino Lafaux

    Estudiante
    Hace 5 años
Omar Fernando López Olivas

Omar Fernando López Olivas

Estudiante
Hace 6 años
Alejandro Andrade Soriano

Alejandro Andrade Soriano

Estudiante
Hace 6 años
yerson lasso

yerson lasso

Estudiante
Hace 5 años
    Miguel Ángel Jancko Gutiérrez

    Miguel Ángel Jancko Gutiérrez

    Estudiante
    Hace 5 años
Martin Campos

Martin Campos

Estudiante
Hace 5 años
    Luis Alejandro Vera Hernandez

    Luis Alejandro Vera Hernandez

    Estudiante
    Hace 5 años
    Martin Campos

    Martin Campos

    Estudiante
    Hace 5 años
Alexis Sebastian Ramos Caballero

Alexis Sebastian Ramos Caballero

Estudiante
Hace 6 años
Jose Alejandro Marin Lopez

Jose Alejandro Marin Lopez

Estudiante
Hace 6 años
Moisés Manuel Morín Hevia

Moisés Manuel Morín Hevia

Estudiante
Hace 5 años
Andrés Felipe Eslava Zuluaga

Andrés Felipe Eslava Zuluaga

Estudiante
Hace 6 años
Juan David Merchán Torres

Juan David Merchán Torres

Estudiante
Hace 5 años
    Héctor Eduardo López Carballo

    Héctor Eduardo López Carballo

    Estudiante
    Hace 5 años
Derick Robinson

Derick Robinson

Estudiante
Hace 5 años
    Héctor Eduardo López Carballo

    Héctor Eduardo López Carballo

    Estudiante
    Hace 5 años
    Juan David González Rodríguez

    Juan David González Rodríguez

    Estudiante
    Hace 5 años
Julio Loarte Huerto

Julio Loarte Huerto

Estudiante
Hace 5 años
Alejandro Andrade Soriano

Alejandro Andrade Soriano

Estudiante
Hace 6 años
Nikolas Santis

Nikolas Santis

Estudiante
Hace 6 años
Boris Vargas Paucara

Boris Vargas Paucara

Estudiante
Hace 6 años
Yesid Ernesto Perdomo

Yesid Ernesto Perdomo

Estudiante
Hace 6 años
    Damian Stone

    Damian Stone

    Estudiante
    Hace 6 años
Mateo Rojas Giraldo

Mateo Rojas Giraldo

Estudiante
Hace 5 años
module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'incline-source-map', resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js', } }```

buenisimo!

Te equivocaste en la línea:

devtool: 'incline-source-map',

es:

devtool: 'inline-source-map',

por eso el comando: npm run build, no me funcionaba.

Les dejo la cheatsheet de npm para que sea más entendible la clase :)

Untitled (18).png

Tienes un link? no se aprecia bien :(

Lo descargue a mi PC y se ve perfecto. Gracias.

npm install ts-loader --save-dev

tremendo!

module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'] }, output: { filename: 'bundle.js' } };

Si les sale un error al ejecutar

npm run build

parecido a este

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".

lo que deben hacer es instalar la misma version de webpack que el profesor, primero eliminamos la version actual

npm remove -D webpack

y luego instalamos la 4.42.0

npm i -D webpack@4.42.0

Revisa bien el webpack.config.js devtool: "inline-source-map",

npm install typescript webpack webpack-cli --save-dev

Una forma mas corta de indicar que se agreguen a la parte de dependencias de Development esos módulos es con el comando.

npm i -D typescript webpack webpack-cli

En mi opinión considero que instalar de manera global el compilador en ocasiones puede derivar en errores de actulizacion, lo que yo recomiendo es siempre instalar el modulo typescript en el entorno de desarrollo.

Asi siempre te aseguras de usar la version de TS mas reciente y actualizada.

Después agregar un script al package.json para correr desde los node_modules el compilador de esta forma.

Example package.js

{ "name": "Curso_Bases_Typescript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "tsc", "dev": "tsc --watch" }, "keywords": [], "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "typescript": "^3.9.7", "webpack": "^4.44.1", "webpack-cli": "^3.3.12" } }

En caso que les salga un error como este, se debe a que la estructura que usa el profe ya quedo desactualizada

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.

Una versión moderna de esta configuración se puede encontrar en la documentación oficial https://webpack.js.org/guides/typescript/

Muchas gracias, me funcionó revisarlo y aplicarlo.

Para quienes no saben de expresiones regulares

  • // son los delimitadores de la expresión.
  • \ se utiliza para escapar algún carácter especial, en este caso el punto.
  • $ hace referencia al final de la coincidencia. Con esto tomando todos los archivos con extensión ts.

Gracias por esa mini explicacion de esas expresiones regulares

Te recomiendo el curso de Expresiones regulares, esta muy bien explicado y hay buenas practicas.

Excelente curso, muy facil de comprender las explicaciones del profesor.

Para la prueba final del bundle.js

<!DOCTYPE html> <html> <head> <title>Fundamentos de TypeScript</title> <script src="dist/bundle.js"></script> </head> <body> <h2>Fundamentos de TypeScript Platzi</h2> <p>Abre la consola del browser para ver el resultado :-)</p> </body> </html>```

Webpack Es un empaquetador de módulos para aplicaciones web. se añade el package.json con: npm init -y Js super optimizado para la producción.

package.json

{ "name": "photo_app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "typescript": "^4.1.3", "webpack": "^5.11.0", "webpack-cli": "^4.2.0" }, "dependencies": { "source-map-loader": "^1.1.3", "ts-loader": "^8.0.12" } }

Webpack

module.exports = { mode: 'production', entry: "./src/main.ts", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"], }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { test: /\.js$/, loader: "source-map-loader" }, ], }, // Other options... };

Hola 👋

Pregunta 🤔 Para que necesitamos webpack para hacer un build si el tsc ya te hace el build?

tsc build -p

Hola!

Webpack agrega cosas adicionales como optimización del código y algo que se llama "tree shaking". Si bien tsc convierte el código de TS a JS, webpack hace cosas adicionales después de ello.

Hola, me pueden decir que version de webpack esta usando el profesor Luis en este video? Gracias!

Hola!

En el archivo package.json puedes ver la configuración que tiene su proyecto, ahí viene las versiones de cada dependencia que usa. En el caso de webpack es la versión "webpack": "^4.42.0", "webpack-cli": "^3.3.11"

puedes usar

npm i -D webpack@4 webpack-cli@3

Mi código:

module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', module: { rules:[ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js' } }

Observación en la documentación de webpack el archivo de configuración lo manejan con el nombre de

webpack.config.js

No sé porque mi verbose no me sale en colores y antes sí xd :P

npm init -y

Me aparece el siguente error cuando ejecuta la instruccion de instalar webpack

PS C:\Users\Administrador\Desktop\TRABAJO\INNOVACION\FRONTEND\photo-app> npm install typescript webpack-cli --save dev npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS: linux npm ERR! notsup Valid Arch: any npm ERR! notsup Actual OS: win32 npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrador\AppData\Roaming\npm-cache_logs\2020-06-01T14_37_49_920Z-debug.log PS C:\Users\Administrador\Desktop\TRABAJO\INNOVACION\FRONTEND\photo-app> npm install typescript webpack-cli --save dev npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS: linux npm ERR! notsup Valid Arch: any npm ERR! notsup Actual OS: win32 npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrador\AppData\Roaming\npm-cache_logs\2020-06-01T14_38_18_274Z-debug.log

Tuve un error parecido. No se si estas usando GIT o algo por el estilo pero lo que hice fue hacer un commit de todos los cambios que había hecho últimamente en el proyecto y después me funciono

Espero que hayas podido solucionar ;)

module.exports = { mode: 'production', entry: './src/main.ts', devtool: 'inline-source-map', resolve: { extensions: ['.ts', '.js'], }, output: { filename: 'bundle.js', } };