Curso de Webpack

Curso de Webpack

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Curso de Webpack

Curso de Webpack

Progreso del curso:0/28contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/28contenidos(0%)

Introducción a Webpack

Material Thumbnail

¿Qué es Webpack?

02:46 min

Material Thumbnail

Conceptos básicos

02:48 min

Proyecto inicial

Material Thumbnail

Tu primer build con Webpack

11:28 min

Material Thumbnail

Instalación de Webpack y construcción del proyecto

05:33 min

Material Thumbnail

Configuración de webpack.config.js

07:51 min

Loaders y Plugins en Webpack

Material Thumbnail

Babel Loader para JavaScript

09:57 min

Material Thumbnail

Loaders para CSS y preprocesadores de CSS

10:58 min

Material Thumbnail

Copia de archivos con Webpack

05:56 min

Material Thumbnail

Loaders de imágenes

04:55 min

Material Thumbnail

Loaders de fuentes

10:07 min

Material Thumbnail

Optimización: hashes, compresión y minificación de archivos

07:09 min

Deploy del proyecto

Material Thumbnail

Variables de entorno

05:30 min

Material Thumbnail

Webpack en modo desarrollo

03:38 min

Material Thumbnail

Webpack en modo producción

05:08 min

Herramientas de desarrollo complementarias

Material Thumbnail

Webpack Dev Server

04:59 min

Material Thumbnail

Webpack Bundle Analyzer

04:47 min

Integración básica de React.js

Material Thumbnail

Instalación y configuración de React

06:58 min

Material Thumbnail

Configuración de Webpack 5 para React.js

07:04 min

Material Thumbnail

Configuración de plugins y loaders para React

05:22 min

Material Thumbnail

Configuración de Webpack para CSS en React

06:24 min

Material Thumbnail

Optimización de Webpack para React

06:13 min

Material Thumbnail

Deploy del proyecto con React.js

03:03 min

Próximos pasos

Material Thumbnail

Continúa con el Curso Práctico de Webpack

00:48 min

nuevosmás votadossin responder
Nahuel Retamoso
Nahuel Retamoso
Estudiante

Como ejecuto el codigo descargado de github en el navegador?

0
Heber Juan Lazo Benza
Heber Juan Lazo Benza
Estudiante
ERROR in ./src/styles/vars.styl 1:0
Module parse failed: Assigning to rvalue (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> $color-black = red;
| 
| body
 @ ./src/index.js 5:0-28

webpack 5.36.2 compiled with 1 error in 630 ms

Tengo este error, segui exactamente todos los pasos

1
Christopher Ormaza
Christopher Ormaza
Estudiante
(()=>{var e={414:()=>{}},r={};function o(t){var n=r[t];if(void0!==n)return n.exports;var a=r[t]={exports:{}};return e[t](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";var e=o(414),r=o.n(e);console.log("hello"),console.log(r()(2,2))})()})();

Esto es lo que me sale, no se si hice algo malo

1
Héctor Daniel Sevilla Sandoval
Héctor Daniel Sevilla Sandoval
Estudiante

Que font y tema usas en tu editor y terminal?

1
Jeferson Velásquez
Jeferson Velásquez
Estudiante

Cuando ejecutamos el script:

npm run build

es lo mismo que cuando ejecutamos

npx webpack --mode production

🤔

1
Pablo Nicolás Alonso
Pablo Nicolás Alonso
Estudiante

Tengo un problema. Cuando hago npm run build en mi consola de vs code me lo compila sin ningun error, pero a la hora de hacer deploy en netlify me da un error luego de usa el npm run build.

3:48:36 PM:>webpack--configwebpack.config.js3:48:41 PM: [webpack-cli] [Error: EISDIR:illegaloperationonadirectory, open'/opt/build/repo/dist/index.html/'] {
3:48:41 PM:   errno:-21,
3:48:41 PM:   code:'EISDIR',
3:48:41 PM:   syscall:'open',
3:48:41 PM:   path:'/opt/build/repo/dist/index.html/'3:48:41 PM: }
3:48:41 PM:npmERR!codeELIFECYCLE3:48:41 PM:npmERR!errno23:48:41 PM:npmERR![email protected]build:`webpack--configwebpack.config.js`3:48:41 PM:npmERR!Exitstatus23:48:41 PM:npmERR!3:48:41 PM:npmERR!Failedatthe[email protected]buildscript.3:48:41 PM:npmERR!Thisisprobablynotaproblemwithnpm.Thereislikelyadditionalloggingoutputabove.3:48:41 PM:npmERR!A complete log of this run can be found in:3:48:41 PM:npmERR!/opt/buildhome/.npm/_logs/2021-05-03T18_48_41_748Z-debug.log3:48:41 PM:────────────────────────────────────────────────────────────────3:48:41 PM:"build.command"failed3:48:41 PM:────────────────────────────────────────────────────────────────3:48:41 PM:3:48:41 PM:Errormessage3:48:41 PM:   Command failed with exit code 2:npmrunbuild3:48:41 PM:3:48:41 PM:Errorlocation3:48:41 PM:   In Build command from Netlify app:3:48:41 PM:npmrunbuild3:48:41 PM:3:48:41 PM:Resolvedconfig3:48:41 PM:   build:3:48:41 PM:     command:npmrunbuild3:48:41 PM:     commandOrigin:ui3:48:41 PM:     publish:/opt/build/repo/dist
1
Rafael Lozano Rolón
Rafael Lozano Rolón
Estudiante

¿Como excluir un plugin para usarlo solo en production y no en desarrollo?

0
desarrolloplp
desarrolloplp
Estudiante

que extensión hace que el código en javascript se vea así por ejemplo => se convierte en una flecha

0
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

¿Los alias son nativos de webpack o eran de algun plugin?

1
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

En netlify me funciona perfecto,pero cuando quiero conectar a dev server me sale este error que por lo que veo tiene que ver con una falla para traer a la API

Uncaught (in promise) TypeError: Cannot read property 'picture' of undefined
    at _callee$ (Template.js:31)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.eval [asnext] (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:7)
    at _next (asyncToGenerator.js:29)

En el archivo .env cada vez que hago un proceso de build las variables borran su valor y pasan a undefined, por lo que probé cambiar las variabels de entorno por un string con la URL pero sigue dando el mismo error

1