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

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:33

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

Curso de Webpack

Clase 4 de 28

Clase 4 / 28

Recursos

Preparar un proyecto real para producción con Webpack es el paso natural después de comprender sus fundamentos. A continuación se explica cómo configurar un portafolio personal que integra CSS, fuentes, imágenes y JavaScript Vanilla, todo optimizado mediante Webpack para generar un bundle eficiente.

¿Qué incluye el proyecto portafolio?

El proyecto consiste en un portafolio personal que muestra foto, nombre, correo electrónico, ubicación y redes sociales. Para generar datos de forma dinámica se consume la API Random User [0:38], que entrega información aleatoria cada vez que se recarga la página. Esto permite practicar lógica de JavaScript sin depender de datos estáticos.

La estructura del proyecto sigue una organización clara:

Carpeta public: archivos públicos del proyecto.
Carpeta source: contiene el código fuente sin empaquetar.
Archivos raíz como .gitignore, package.json, licencia y README.

Dentro de source encontramos:

HTML, CSS y JavaScript Vanilla sin frameworks ni librerías.
Fuentes: la tipografía Ubuntu de Google Fonts.
Imágenes: íconos de GitHub, Instagram y Twitter.
Estilos ya listos para el proyecto.
Un sistema de templates que genera la interfaz de forma modular [3:22].
Una utilería de fetch que conecta con la API de Random User [3:38].
El punto de entrada donde se concentra la lógica principal y la manipulación del DOM [3:50].

¿Cómo se instala Webpack en el proyecto?

Una vez clonado el repositorio desde GitHub, el primer paso es instalar las dependencias necesarias. Desde la terminal, dentro de la carpeta del proyecto, se ejecuta [4:20]:

bash npm install webpack webpack-cli -D

La bandera -D indica que se trata de una dependencia de desarrollo, ya que Webpack solo se necesita durante el proceso de construcción, no en el entorno de producción final.

¿Qué ocurre al compilar sin configuración personalizada?

Antes de crear un archivo de configuración propio, se puede probar la configuración por defecto de Webpack ejecutando [4:50]:

bash npx webpack --mode production

El comando npx permite ejecutar paquetes instalados localmente. Al indicar --mode production, Webpack aplica automáticamente minificación y optimizaciones. El resultado es un archivo main.js dentro de la carpeta dist que contiene toda la lógica, los templates y las utilidades del proyecto comprimidos en un solo bundle [5:15].

¿Qué significa el modo producción en Webpack?

Cuando se utiliza --mode production, Webpack activa internamente varias optimizaciones:

Minificación del código JavaScript.
Eliminación de código muerto (tree shaking).
Compresión del bundle final.

Esto genera un archivo mucho más ligero y eficiente para ser servido en un servidor web real.

¿Cuáles son los próximos pasos del proyecto?

El objetivo es ir más allá de la configuración por defecto. En las siguientes etapas se creará un archivo de configuración (webpack.config.js) donde se definirán [5:40]:

Punto de entrada (entry): el archivo principal desde donde Webpack comienza a resolver dependencias.
Punto de salida (output): la ubicación y nombre del bundle generado.
Configuraciones adicionales: manejo de CSS, fuentes, imágenes y otras optimizaciones específicas.

La idea central es que el portafolio quede completamente preparado para producción, con todos sus recursos procesados y optimizados por Webpack. El proyecto final se puede personalizar con datos propios para tener un portafolio funcional y compartible.

¿Ya tienes claro cómo quieres personalizar tu portafolio? Comparte tus ideas y dudas en los comentarios.

Rodrigo Ramos Xochiteotzin

Hace 5 años

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

Hace 5 años

Hola!

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

Saludos!

Elias Rayas Gonzalez

Hace 5 años

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

Comentarios (30)30 comentarios

Fernando Quinteros Gutierrez

Hace 6 años

Leobardo Adrian Diaz Ruiz

Matías Wasiak

Rony Porraz Vargas

Andres Gallego

Anthony Zepeda

Hace 4 años

Luis Angel Olivárez Estrada

Irving Juárez

Franklin Gerardo Pimentel Hernández

Reinaldo Mendoza

Matias Diaz

Andres Felipe Pinchao Ramirez

Miguel Hernández Casiano

Romen Ter Gazarian

Jhon Dairo Meche Tenza

Andrés Villarraga

Max Andy Diaz Neyra

Alejandro Ivan Mendieta

Benjamin Flores

Edgardo Andres Vargas Saenz

DANIEL SUAREZ

Ernesto Valentin Caamal Peech

Hector suarez

Hace 3 años

Andrés Muñoz

Blanca Segura Garcia

José Alberto Estrella Trejo

Ramses Garate

roy vargas

Bryan Imbaquingo

Fabio Erik Sosa Morinigo

Christian Armando Consuelo Mayén

Hernán Arica

Héctor Eduardo López Carballo

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

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

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

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