Optimización de Proyectos Web con Webpack para Producción

Resumen

¿Cómo comenzar con la optimización de un proyecto usando Webpack?

La optimización de un proyecto web es fundamental para garantizar que se ejecute de manera eficiente en producción. Si estás interesado en aprender cómo transformar un proyecto básico de HTML, CSS y JavaScript en uno listo para producción utilizando Webpack, aquí tienes una guía paso a paso. Webpack es una herramienta poderosa que permite empaquetar y optimizar el código, imágenes, fuentes y otros recursos que conforman un sitio web. Vamos a desglosar cómo realizar esta transición utilizando un proyecto de portafolio como ejemplo práctico.

¿Qué proyecto vamos a crear?

Para entender el poder de Webpack, trabajaremos con un proyecto de portafolio simple. Este portafolio mostrará:

Foto de perfil.
Nombre y correo electrónico.
Ubicación y redes sociales.

Cada vez que refrescas la página, se generará un personaje nuevo gracias a una API aleatoria, añadiendo lógica al proyecto. Aunque no profundizaremos en JavaScript, CSS o detalles específicos del proyecto, el objetivo principal es optimizarlo utilizando Webpack.

¿Cómo clonar el proyecto?

El primer paso es obtener el repositorio del proyecto. Utiliza el terminal de tu entorno de desarrollo preferido para clonar el proyecto. Aquí está el comando esencial:

git clone [URL_del_repositorio]

Asegúrate de estar en tu espacio de trabajo adecuado, y utiliza un editor de texto como Visual Studio Code para abrir el proyecto y comenzar las modificaciones necesarias.

¿Qué organizar para iniciar con Webpack?

Un aspecto fundamental al trabajar con Webpack es la organización de archivos. La estructura básica debería incluir:

Carpeta public: Contiene archivos estáticos esenciales.
Carpeta source: Aquí reside el código fuente del proyecto.
Archivos clave como .gitignore, el package.json y la licencia.

Dentro de source, encontrarás:

HTML, CSS y JavaScript Vanilla: Sin frameworks ni librerías.
Fonts y recursos estáticos: Incluyendo imágenes de redes sociales.
Sistema de templates y lógica de API: Utilizado para la generación dinámica del contenido utilizando Random User API.

¿Cómo integrar y configurar Webpack en el proyecto?

El siguiente paso después de entender la estructura es integrar Webpack. Procede con la instalación en el terminal:

npm install webpack webpack-cli --save-dev

Esto añade Webpack y sus componentes de línea de comandos como dependencias de desarrollo. Una vez instalado, puedes comenzar a trabajar en las configuraciones utilizando Webpack para empaquetar el proyecto.

Para asegurar que las configuraciones de Webpack funcionen sin problemas, ejecuta el siguiente comando para ver cómo se comporta en modo producción:

npx webpack --mode production

En este estado, Webpack usará sus configuraciones predeterminadas para minificar y preparar el proyecto para producción.

¿Por qué crear un archivo de configuración personalizado?

El archivo de configuración de Webpack es crucial porque define cómo se manejan las entradas y salidas del proyecto, así como otras configuraciones esenciales. En las próximas etapas del aprendizaje, crearás un archivo personalizado que se ajuste a las necesidades específicas del proyecto de portafolio.

Este archivo permitirá personalizar los procesos y optimizar aún más el proyecto integrando diversas configuraciones como loaders y plugins.

¡Adelante!

Ahora que tienes una visión clara, estás listo para profundizar en Webpack y llevar tu proyecto a un nivel de producción óptimo. ¡Anímate a continuar explorando y aprendiendo! Estas habilidades son valiosas en el mundo del desarrollo web, y te ayudarán a crear proyectos modernos y eficientes.

Fernando Quinteros Gutierrez

student•

👣 Pasos de la clase

Clonar el proyecto

git clone https://github.com/gndx/js-portfolio.git

Instalar webpack con npm

npm install webpack webpack-cli -D

con Yarn

yarn add webpack webpack-cli -D

Leobardo Adrian Diaz Ruiz

student•

Gracias por compartir :D

Matías Wasiak

student•

Gracias!

Rony Porraz Vargas

student•

El proyecto

git clone https://github.com/gndx/js-portfolio.git

Andres Gallego

student•

Anthony Zepeda

student•

Me gustaría que saber que herramienta usas para ver el codigo así

Luis Angel Olivárez Estrada

student•

Es un tema llamado "Neon Dreams"

Irving Juárez

student•

Todo nuestro código termina siendo una tira ininteligible de letras y signos extraños gracias a Webpack? Es lo mas bonito que me ha pasado desde hace años <3

Franklin Gerardo Pimentel Hernández

student•

Jajaja y lo que falta

Reinaldo Mendoza

student•

Me tome el atrevimiento de gitignorar:

/dist
/node_modules
package-lock.json

Matias Diaz

student•

Buena practica, compañero!

Andres Felipe Pinchao Ramirez

student•

INSTALATION OF WEBPACK AND CONSTRUCTION OF THE PROYECT :D

Entendimos las bases de webpack pero ahora vamos a crear un proyecto que nos va a permitir trabajar con todas las particularidades que nos brinda webpack y preprarlo para mandarlo a produccion

CSS
Imágenes
fonts
optimización de código

El proyecto que realizaremos será un pequeño portafolio en el que podremos ver nuestra foto y nuestro nombre y redes sociales.

Lo clonamos de aqui y hacemos uso de los assets que previamente nos prepararon

gndx/js-portfolio

Luego de ello instalaremos webpack para configurar nuestro proyecto

utilizamos el comando para poder ver webpack en mod production

npx webpack --mode production

Miguel Hernández Casiano

student•

Tus posibles dudas resueltas:

1. ¿Qué es webpack-cli?

CLI se refiere a Conmmand line interface y básicamente es instalar los comandos de webpack en la terminal para que puedas ejecutarlos. En cuanto a “-D”, es la abreviación de “--save-dev”, lo cual indica que esta es una dependencia que se utilizará solo para el desarrollo del proyecto y que no afecta para el funcionamiento para cuando se hace el despliegue a producción. . .

2. ¿Por qué “npx webpack” y no “npm webpack”?

NPM se refiere a “node package manager” y sirve para instalar paquetes como tal. Cuando instalas un paquete, posteriormente necesitarás indicar dónde se encuentra el paquete para ser ejecutado. Esto se hace mediante dos maneras (elegir la que se te haga más fácil):

Indicando en la terminal donde se encuentra el paquete: ./node_modules/.bin/your-package-name poniendo un script en tu “package.json”:

{
    "name": "Your app",
    "version":  "1.0.0",
    "scripts":  {
            "your-package":  "your-package-name"
     }
}

y después ejecutandolo en la terminal mediante: npm run your-package-name .

NPX viene de “node package execute” y en esencia sirve para ejecutar paquetes sin necesidad de instalarlos previamente. NPX checa si es que ya tenías instalado el paquete y si no, lo descarga e instala para hacer una ejecución de una sola vez.

De hecho, es posible hacer lo que el profe hizo de “npx webpack” usando npm (porque ya instalamos webpack). En tus scripts añade: webpack: "webpack". No olvides poner una coma en la línea anterior, que es donde aparece el script “test”. . Ejecuta en tu terminal: npm run webpack . Aquí una captura de que yo lo intenté y el resultado es el mismo:

. En el "script" puedes incluir la parde de --mode production o --mode developmentcomo lo hace el profe al usar npx. . Esta aclaración solo es para que sepas de dónde viene cada cosa. Recomiendo seguir y hacer las cosas como indica el profesor para evitar inconvenientes futuros.

Romen Ter Gazarian

student•

Excelente aporte

Jhon Dairo Meche Tenza

student•

muy buen aporte

Andrés Villarraga

student•

En el caso de ser un proyecto que No es SPA (problemas de hosting), se puede usar webpack ? alguien sabe ?

Max Andy Diaz Neyra

student•

Siempre puedes usar webpack, no fue hecho para SPA sino para código JS en general.

Alejandro Ivan Mendieta

student•

Webpack parte cómo base el tener un punto de entrada, generalmente index.js,donde se importa todo lo necesario para el proyecto. Ya de ahí con los loaders vas configurando para que entienda más tipos de archivos

Benjamin Flores

student•

Profesor Oscar, qué plugins utiliza para que los iconos de las carpetas y archivos se vean tan geniales? Dígame porfavor

Edgardo Andres Vargas Saenz

student•

Hola Benjamin-Flores, hay una extensión de Visual Studio Code que se llama Material Icon Theme, échale un vistazo.

DANIEL SUAREZ

student•

para los que utilizan YARN la instalacion seria:

yarn add -D webpack webpack-cli

Ernesto Valentin Caamal Peech

student•

Comando webpack para compilar por primera vez

Matias Diaz

student•

Alguien sabe por que motivo es conveniente instalar WebPack de forma local y no global?

O por que no instalamos webpack directamente de forma Global?

Muchas gracias!

Andrés Muñoz

student•

Así que no importa si escribo mi código con muchas variables que describen cada argumento y tengo muchas funciones descriptivas a la final webpack va optimizar todo el javascript ?

Blanca Segura Garcia

student•

La verdad es que estoy ... en la nube ... Primero hicimos una carpteta "curso-webpack" y después de git clonamos js-portfolio. Luego trabajamos en el archovo "Curso-webpack" ... total dónde estamos ... Por favor urgente un alcance!

José Alberto Estrella Trejo

student•

yo tengo dos carpetas separadas de curso-webpack y la js-portafolio, la primera creo que solo era para que viéramos un ejemplo con en codigo muy sencillo y fácil de entender como lo optimizo, ahora lo veremos trabajando de verdad pero es un repositorio completamente nuevo e independiente

Ramses Garate

student•

Alguien sabe que plugin es ese que autocompleta los paquetes de NPM?

roy vargas

student•

Buena pregunta, a mi también me interesaría saber cual es xd

Bryan Imbaquingo

student•

si hablas de la instalación cuando la realiza desde la terminal pues eso es porque la terminal tiene autocompletado, reconoce los comandos que se ingresaron antes en la terminal, el profe no usa una bash normal, usa una zsh, son más personalizables y potentes, hay un curso de prework, no lo tomé yo pero dicen que ahí se configura para tener una zsh, si quieres revisa mi github, ahí tengo mis archivos de configuración de mi sistema, si quieres te puedes instalar el tema que yo tengo que es powerlevel10 y las extensiones las tienes que instalar primero para que veas el autocompletado en la terminal my dotFiles, ojo primero instala la ZSH y luego los plugins, algo más que debes tener en cuenta es que en la zsh aparecen los íconos en la terminal, para eso tienes que instalarte primero una nerdfont también puedes ver en el repo de mi editor de texto nerdFont y eso sería todo creo, si tienes dudas trataré de responder lo más pronto posible

Fabio Erik Sosa Morinigo

student•

para generar gitignore para node Instalar de forma global

sudo npm i -g gitignore

LIstar todos los posibles tipos de gitignore soportado

gitignore -types

Crear gitignore para node:

gitignore Node

Christian Armando Consuelo Mayén

student•

Creo que lo mas dificil de este curso es dejar de escribir weboack en lugar de webpack en los comandos de la consola. :P

Hernán Arica

student•

Por que cuando tengo fuente de google fonts me las pone en la raiz?

Héctor Eduardo López Carballo

student•

Lo más probable es que tengas archivos que estás importando además de las etiquetas que traen las fuentes de google. Comparte tu repositorio para que le podamos echar un ojo, por favor.

Rodrigo Ramos Xochiteotzin

student•

Hola, buenas Una duda: estaba instalando webpack en un proyecto y todo bien pero cuando corrí

npx webpack

me salió esto:

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/body-parser/lib/read.js 18:11-26
Module not found: Error: Can't resolve 'zlib' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/body-parser/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }
 @ ./node_modules/body-parser/lib/types/json.js 19:11-29
 @ ./node_modules/body-parser/index.js 142:15-42
 @ ./node_modules/express/lib/express.js 15:17-39
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 228:12-34
Module not found: Error: Can't resolve 'querystring' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/body-parser/lib/types'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
	- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "querystring": false }
 @ ./node_modules/body-parser/index.js 151:15-48
 @ ./node_modules/express/lib/express.js 15:17-39
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/content-disposition/index.js 22:15-39
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/content-disposition'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/response.js 16:25-55
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/cookie-signature/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/cookie-signature'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }
 @ ./node_modules/express/lib/response.js 26:11-43
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/destroy/index.js 14:17-41
Module not found: Error: Can't resolve 'fs' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/destroy'
 @ ./node_modules/send/index.js 18:14-32
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/destroy/index.js 15:13-30
Module not found: Error: Can't resolve 'stream' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/destroy'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }
 @ ./node_modules/send/index.js 18:14-32
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/etag/index.js 21:13-30
Module not found: Error: Can't resolve 'crypto' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/etag'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }
 @ ./node_modules/express/lib/utils.js 21:11-26
 @ ./node_modules/express/lib/application.js 24:18-48 25:25-62 26:19-50
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/etag/index.js 22:12-31
Module not found: Error: Can't resolve 'fs' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/etag'
 @ ./node_modules/express/lib/utils.js 21:11-26
 @ ./node_modules/express/lib/application.js 24:18-48 25:25-62 26:19-50
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/application.js 23:11-26
Module not found: Error: Can't resolve 'http' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/application.js 30:14-37
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/request.js 18:11-30
Module not found: Error: Can't resolve 'net' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'
 @ ./node_modules/express/lib/express.js 21:10-30
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/request.js 20:11-26
Module not found: Error: Can't resolve 'http' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }
 @ ./node_modules/express/lib/express.js 21:10-30
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/response.js 20:11-26
Module not found: Error: Can't resolve 'http' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/response.js 23:11-26
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/utils.js 24:18-40
Module not found: Error: Can't resolve 'querystring' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
	- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "querystring": false }
 @ ./node_modules/express/lib/application.js 24:18-48 25:25-62 26:19-50
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/view.js 17:11-26
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/application.js 22:11-28
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/express/lib/view.js 18:9-22
Module not found: Error: Can't resolve 'fs' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/express/lib'
 @ ./node_modules/express/lib/application.js 22:11-28
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/mime-types/index.js 16:14-37
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/mime-types'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/type-is/index.js 16:11-32
 @ ./node_modules/express/lib/request.js 19:13-31
 @ ./node_modules/express/lib/express.js 21:10-30
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/mime/mime.js 1:11-26
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/mime'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/send/index.js 24:11-26
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/mime/mime.js 2:9-22
Module not found: Error: Can't resolve 'fs' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/mime'
 @ ./node_modules/send/index.js 24:11-26
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/parseurl/index.js 15:10-24
Module not found: Error: Can't resolve 'url' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/parseurl'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }
 @ ./node_modules/express/lib/request.js 23:12-31
 @ ./node_modules/express/lib/express.js 21:10-30
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/send/index.js 23:9-22
Module not found: Error: Can't resolve 'fs' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/send'
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/send/index.js 28:11-26
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/send/index.js 30:13-30
Module not found: Error: Can't resolve 'stream' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/send/index.js 31:11-26
Module not found: Error: Can't resolve 'util' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/send'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }
 @ ./node_modules/express/lib/response.js 31:11-26
 @ ./node_modules/express/lib/express.js 22:10-31
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/serve-static/index.js 19:14-37
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/serve-static'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./node_modules/express/lib/express.js 81:0-40
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./node_modules/serve-static/index.js 21:10-24
Module not found: Error: Can't resolve 'url' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/node_modules/serve-static'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }
 @ ./node_modules/express/lib/express.js 81:0-40
 @ ./node_modules/express/index.js 11:0-41
 @ ./src/index.js 6:16-34

ERROR in ./src/index.js 10:13-28
Module not found: Error: Can't resolve 'path' in '/home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

28 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.44.0 compiled with 28 errors and 1 warning in 4773 ms
npm ERR! code 1
npm ERR! path /home/dgrm/Documentos/codigo/apps/maquetaDentista/maquetaDentista
npm ERR! command failed
npm ERR! command sh -c webpack "--mode" "production"

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dgrm/.npm/_logs/2021-07-15T06_22_23_393Z-debug.log

¿Alguna idea? :c

Antonio Luis Gil Rodríguez

student•

Hola!

Puede que esto te ayude: https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

Saludos!

Elias Rayas Gonzalez

student•

No se si esto sea el caso, pero instalaste el resto de las dependencias? Usa npm install antes de correr webpack.

Alan Felix

student•

Tengo un error al ejecutar Webpack