Curso de Webpack

Clases del 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
EDWIN ANTONIO CAN PINTO
EDWIN ANTONIO CAN PINTO
Estudiante

se debe instalar webpack cada vez que lo vaya a usar en un proyecto?

1
Andrés Felipe Arboleda Londoño
Andrés Felipe Arboleda Londoño
Estudiante

Me dio este error, es como no tiene webpack como dependencia de desarrollo pero si la tiene, alguien me puede ayudar con esto?

1
EDWIN ANTONIO CAN PINTO
EDWIN ANTONIO CAN PINTO
Estudiante

ya estoy en la parte intermedia de la escuela de javascript, ¿cuál curso hago primero?

  • curso de webpack
  • curso práctico de react js
  • curso de react router y redux
1
Andres Rivera
Andres Rivera
Estudiante

Según la documentación toca crear babel.config.json o .babelrc.json pero aquí usan solo .babelrc ¿porqué no se rompe?

1
Daniel Castro Alejos
Daniel Castro Alejos
Estudiante

Compañero me sale este error, espero su ayuda:
2021-07-19_12h27_35.png

1
Javier Arturo Chávez Sialer
Javier Arturo Chávez Sialer
Estudiante

¿Por qué el use para el js es un objeto y para el css es un array?

1
Daniel Eduardo Sanchez Yañez
Daniel Eduardo Sanchez Yañez
Estudiante

Tengo un problema no me carga las fonts. O bueno en la terminal no me da error pero no me las carga y ya he probado todo. Necesito ayuda XD.
EL ERROR
ERROR.png

Abajo clo mis codigos
terminal sale todo exitoso
PS C:\Users\dannz\desktop\js-portfolio> npm run dev

> [email protected]1.0.0 dev
> webpack --mode development

assets by status 5.24 KiB [cached] 5 assets
assets by status 154 KiB [compared for emit]
  assets by path assets/ 104 KiB
    assets by path assets/images/*.png 5.13 KiB
      asset assets/images/github.png 2.39 KiB [compared for emit] [from: src/assets/images/github.png] [copied]
      asset assets/images/instagram.png 1.52 KiB [compared for emit] [from: src/assets/images/instagram.png] [copied]
      asset assets/images/twitter.png 1.22 KiB [compared for emit] [from: src/assets/images/twitter.png] [copied]
    assets by path assets/fonts/99 KiB
      asset assets/fonts/ubuntu-regular.woff 52.9 KiB [compared for emit] [from: src/assets/fonts/ubuntu-regular.woff] (auxiliary name: main)
      asset assets/fonts/ubuntu-regular.woff2 46.1 KiB [compared for emit] [from: src/assets/fonts/ubuntu-regular.woff2] (auxiliary name: main)
  assets by chunk 49.1 KiB (name: main)
    asset main.js 43.5 KiB [compared for emit] (name: main)
    asset main.css 5.56 KiB [compared for emit] (name: main)
  asset ./index.html 371 bytes [compared for emit]
Entrypoint main 49.1 KiB (104 KiB) = main.css 5.56 KiB main.js 43.5 KiB 7 auxiliary assets
runtime modules 1.98 KiB 6 modules
modules by path ./src/4.68 KiB (javascript) 5.13 KiB (asset) 4.94 KiB (css/mini-extract)
  javascript modules 4.56 KiB
    modules by path ./src/styles/ 100 bytes 2 modules
    3 modules
  asset modules 126 bytes (javascript) 5.13 KiB (asset) 3 modules
  css modules 4.94 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./src/styles/main.css 4.92 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./src/styles/vars.styl 24 bytes [built] [code generated]
modules by path ./node_modules/24.8 KiB
  ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js 787 bytes [built] [code generated]
  ./node_modules/@babel/runtime/regenerator/index.js 49 bytes [built] [code generated]
  ./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
webpack 5.45.1 compiled successfully in 1337 ms
PS C:\Users\dannz\desktop\js-portfolio>

mi webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js', 
        assetModuleFilename: './assets/images/[hash][ext][query]'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader'
            }
        },
        {
            test: /\.css|.styl$/i,
            use: [MiniCssExtractPlugin.loader,
            'css-loader',
            'stylus-loader'
        ]
        },
        {
            test: /\.png/,
            type: 'asset/resource'
        },
        {
            test: /\.(woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    mimeType: "application/font-woff",
                    name: "[name].[ext]",
                    outputPath: "./assets/fonts/",
                    publicPath: "./assets/fonts/",
                    esModule: false,
                },
            }
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin(),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ]
        })
    ]
}

mi main.css

@font-face {
	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-regular.woff') format('woff'), url('../assets/fonts/ubuntu-regular.woff2') format('woff2');
		font-weight: 400;
		font-style: normal;
}


html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline
}

audio:not([controls]) {
	display: none;
	height: 0
}

[hidden],
template {
	display: none
}

a {
	background: 00
}

a:active,
a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

b,
strong {
	font-weight: 700
}

dfn {
	font-style: italic
}

h1 {
	font-size: 2em;
	margin: .67em0
}

mark {
	background: #ff0;
	color: #000
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -.5em
}

sub {
	bottom: -.25em
}

img {
	border: 0
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 1em40px
}

hr {
	box-sizing: content-box;
	height: 0
}

pre {
	overflow: auto
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0
}

button {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
htmlinput[type=button],
input[type=reset],
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled],
htmlinput[disabled] {
	cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input {
	line-height: normal
}

input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	height: auto
}

input[type=search] {
	-webkit-appearance: textfield;
	box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

fieldset {
	border: 1px solid silver;
	margin: 02px;
	padding: .35em .625em .75em
}

legend {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto
}

optgroup {
	font-weight: 700
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

td,
th {
	padding: 0
}

body {
	background-color: #f9f9f9;
	font-family: Ubuntu, sans-serif;
}

.center {
	position: relative;
	left: 50%;
	transform: translateX(-50%)
}

.About {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(auto, 1024px);
  justify-content: center;
  padding: 4em0;
}

.card {
	position: relative;
	padding: 20px0;
	width: 100%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 001pxrgba(0, 0, 0, .5);
	overflow: hidden;
	text-align: center;
	z-index: 5
}

.card:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 130px;
	top: 0;
	background: #f9f9f9;
	border-bottom: 1px solid rgba(0, 0, 0, .15);
	z-index: -1
}

.card_photo {
	position: relative;
	background: #fff;
	padding: 5px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	margin-bottom: 30px;
	border: 1px solid rgba(0, 0, 0, .25)
}

.card_photoimg {
	width: 150px;
	border-radius: 50%
}

.card_title {
	color: #999;
	font-size: 18px;
	margin: 0
}

.card_value {
	color: #2c2e31;
	font-size: 38px;
	margin: 5px;
	text-transform: capitalize
}

.cardul {
  list-style-type: none;
}

.cardli {
  display: inline-block;
  margin: 01em00
}

.card_social {
	width: 400px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 1em0;
}
.card_socialimg {
	width: 32px;
	height: 32px;
}

.card_sociala {
	text-decoration: none;
}

.circle {
  position: relative;
}

.circle svg {
  fill: none;
  stroke: #8a3ab9;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: stroke-draw 6s ease-out infinite alternate;
}
.circleimg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes stroke-draw {
  from {
    stroke: #8a3ab9;
    stroke-dasharray: 1;
  }
  to {
    stroke: #cd486b;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}
2
Santiago Ramírez
Santiago Ramírez
Estudiante

Cómo puedo usar una imagen en css??
Usando background-image?

1
Daniel Castro Alejos
Daniel Castro Alejos
Estudiante

Espero su ayuda en este error:
2021-07-16_17h49_01.png

1
Rodrigo Ramos Xochiteotzin
Rodrigo Ramos Xochiteotzin
Estudiante

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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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-34ERROR 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

1