Clonando el repositorio e instalando Webpack

Tuve muchos problemas con el

webpack-dev-server

(npm me instaló la versión “^3.11.0”)

Me salían muchos problemas extraños:

$ npm run dev

> [email protected]1.0.0 dev /home/freddy/Documentos/platzi/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/freddy/Documentos/platzi/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Lo solucioné de la siguiente forma:

En package.json cambié el script dev así:

"dev": "webpack serve",

Y ahora va bien, o eso me gusta pensar ):

Para usar packages de desarrollo (que instalamos para el proyecto) como webpack o webpack-cli podemos ejecutar el comando npx
por ejemplo en el caso de webpack:

npx webpack src/index.js

Este sustituye a

node_modules\.bin\webpack src/index.js

Yo tenía este error
![](

y lo resolvi escribiendo

npx webpack ./src/index.js

en windows el comando debe ir dentro de comillas para que lo respete
"./node_modules/.bin/webpack" src/index.js

Recomendado hacer el curso de webpack y olvidar todo lo que ya conocen…

Sobre todo create-react-app

Para instalar las versiones de las depedencias utilizadas por el profesor usan este comando

npm install [email protected]4.31.0 --save-dev
npm install [email protected]3.3.2 --save-dev
npm-install html-webpack-plugin@3.2.0 --save-dev
npm install webpack-dev-server@3.4.1 --save-dev

Si al script dev le agregamos la bandera --open cada que lo ejecutemos abrirá una pestaña del navegador con el proyecto.

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }

La forma de llamar el dev Server también a cambiado:

 "dev": "webpack serve"

He tenido un problema con la inicialización de webpack, porque no reconocia el comando

src/index.js

, pero lo solucione utilizando

npx webpack

, por defecto webpack va a buscar el archivo src/index.js. Espero que les sirva.

Repo del curso

Resumen Clase
se instalaron las siguientes dependencias
Webpack
npm install --save-dev webpack webpack-cli
Plugins Webpack
npm install --save-dev html-webpack-cli webpack-dev-server
Se armo la configuracion basica de webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports= {
  output: {
    filename: 'app.bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

Pasos versión 2021 en Windows 10

git clone https://github.com/midudev/curso-platzi-react-avanzado

cd curso-platzi-react-avanzado\

code .

Abrimos la terminal (del Visual Studio Code en mi caso)

npm init -y

npm install -D webpack webpack-cli

npm install -D html-webpack-plugin

npm install -D webpack-dev-server

Crearemos en el root una carpeta llama src y dentro de ella un archivo index.js en el cual colocaremos solo un
console.log('Empezamos el curso!')

Crearemos en el root de nuestro proyecto un archivo webpack.config.js el cual tendrá toda la configuración de webpack
El contenido es el siguiente

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { output: { filename: 'app.bundle.js' }, plugins: [ new HtmlWebpackPlugin() ] }

En el package.json agregamos estos scripts
"build": "webpack", "dev": "webpack serve",

Finalmente ejecutamos
npm run build
npm run dev

Buen día, quizás a alguien le suceda lo mismo, tuve que ejecutar el comando de esta forma ya que me generaba error, ahora si hizo el build.

npx webpack --entry ./src/index.js

Resumen de las dependencias a instalar.

1. Webpack & Webpack-cli

npm install webpack webpack-cli --save-dev

1. Html Webpack Plugin

npm install html-webpack-plugin --save-dev

1. Webpack dev server

npm install webpack-dev-server --save-dev

midudev nos comparte las herramientas que usa en su editor y terminal.

Mi configuración de editor, terminal, apps que uso y gadgets

Hola estudiantes del 2022:
Aqui les dejo los archivos:
package.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":  "webpack serve --mode development"
  },

Tambien podemos escribir

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":  "webpack serve"
  },

y en el archivo de webpack:

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode:'development',
    output: {
            filename: 'app.bundle.js'
    },
    plugins: [
            new HtmlWebpackPlugin()
    ]
}

para instalar webpack como dependencia de desarrollo

npm i -D webpack webpack-cli

Sé que algunos tendrán inconvenientes al realizar el curso por la antigüedad del mismo ( así que les dejo mi repositorio):

• RepoPetgram

Pueden dirigirse a las ramas del repositorio y están divididos según el avance que realice, tienen indicaciones que espero les sirva de ayuda ( yo lo termine gracias a los comentarios que tiene el curso y muchos de estos los aplique)

Pueden ver el proyecto aquí:

• LinkVelcelApp
• Video

Para los que no les funcione este comando:
./node_modules/.bin/webpack src/index.js
Corran este otro:
node_modules/.bin/webpack ./src/index.js

Si quieren quitar los warnings en el primer empaquetado antes de configurar el script de build pueden usar lo siguiente en la terminal.

$./node_modules/.bin/webpack --mode=development  ./src/index.js

Si alguien le salta error con el

"dev" : "webpack-dev-server"

yo lo cambié por

"dev": "webpack serve --open"

Este es un curso avanzado de react, varios coceptos se dan por sentados, no es requerido pero si es super recomendable tomar este curso despues de conocer, ES6, webpack, CRA, componentes de clase y hooks. De otra manera va a ser mas dificil seguirle el ritmo al curso.

Me hubiese parecido mejor que el profe explique los objetivos de esta configuración. Me pregunto que ganaremos?
Porque descartamos la configuración por defecto que nos tira React?
Me resulta bastante incomodo ir tirando comandos sin saber para que. Me siento como una bestia animal de la programación! jajja!

html-webpack-plugin genera un archivo de html 5 incluyendo todos los empaquetados de webpack dentro de etiquetas script en caso de ser js o link en caso de css.

El dist/index.html sería el html generado:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>

colocar el parametro mode para correr webpack

.\node_modules\.bin\webpack --mode=development ./src\index.js

En la sección recursos es incorrecto el nombre de la dependencia **wepack-cli ** => webpack-cli

dia 27-04-2021. tuve problemas al inicializar el webpack
utilice los comando de instalacion sin especificar la version.
solucion usar el comando en la terminal:

npx webpack
este busca por defecto el src/index.js

luego en el package.json se modifico los scripts :

“scripts”: {
“build”: “webpack --mode production”,
“dev”: “webpack serve --mode development”,
“test”: “echo “Error: no test specified” && exit 1”
},

Esto se debe ingresar a la consola

npx webpack  ./src/index.js

Debemos indicar que estamos en la misma ruta con el " ./ ", de lo contrario, podria buscar en " C://src/index.js "

si les salen este error:

> webpack-dev-server

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\roog7463\Desktop\platzi\curso_avanzado_react\curso-platzi-react-avanzado\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)   
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code 1
npm ERR! path C:\Users\roog7463\Desktop\platzi\curso_avanzado_react\curso-platzi-react-avanzado
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack-dev-server

Solucionar de la siguiente manera:
En el archiv de package.json ingresar:

Si te encuentras en windows, la instrucción para generar el dist debe ser así:

"./node_modules/.bin/webpack" src/index.js

Nota: Lleva comillas.

Hay un typo en uno de los comandos de la descripción de este video.
Para el Paso 2 (hace falta una “b” en “wepack/cli”) sería:

npm i webpack webpack-cli --save-dev

Si les tira un error cuando corren “npm run dev”, en el archivo package.json, cambien el script “dev”, por el siguiente:

 "dev": "webpack serve"

para los que tuvieron problemas con los scripts, intenten esto a ver si les funciona y se les quita los warning (package.json)

"scripts": {
    "build": "webpack",
    "dev": "webpack serve --mode development --env development --open"
  },

El problema con el script de webpack-dev-server lo solucione instalando
npm install [email protected] --save-dev

npm install [email protected] --save-dev

npm install [email protected] --save-dev

estuve harto tiempo viendo como se arreglaba lo de webpack /src/index,js en windows, pero con las nuevas versiones basta con escribir:

npx webpack

y listo, tienen su carpeta dist con el main compilado
espero que en el futuro no haya problema con eso jaja

No es demasiado largo el proceso con Webpack? Con create-react-app todo es mas simple

Hay un error pequeñín en el paso dos. En vez de wepack-cli es webpack-cli

otra opcion para ejecutar los comandos de manera mas comoda es agregarlos a lista de scripts de npm; dentro del package json podemos guardar los comandos personalizados de consola en la seccion script
por ejemplo:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"./node_modules/.bin/webpack ./src/index.js && node dist/main.js"
  },

de esta manera solo corro en terminal : npm run dev y ejecuta esos dos comandos

Ayuda! ma aparece el siguiente error al ejecutar npm run dev

$ npm run dev

> [email protected]1.0.0 dev /Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module '../lib/Server'
Require stack:
- /Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server:13:16)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/diego_romero/ReactAvanzado/curso-platzi-react-avanzado/node_modules/.bin/webpack-dev-server'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/diego_romero/.npm/_logs/2020-06-25T08_01_15_979Z-debug.log```

Dios mio, gracias por hacer el zoom del vídeo tan grande, se puede ver perfecto en celular 😃

Hay un pequeño typo en el paso 1 de la descripción del video.
No es midudex, sino midudev.

Todo cool

const Path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: Path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: "html-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html"
    })
  ]
};

Instalación de webpack

npm i webpack webpack-cli --save-dev

Empaquetando

.node_modules/.bin/webpack src/index.js ó
npx webpack src/index.js

se crea la carpeta src con un archivo de index.js
se instalan las dependencia de web pack

npm i webpack webpack-cli --save-dev

./node_modules/.bin/webpack src/index.js

indicamos a webpack, que queremos que nos compile: se creara una carpeta que se llama dist.

npm i html-webpack-plugin --save-dev

Para compilar en html, se creara un archivo que se llama webpack.config.js, la compilacion de este plugin es exportar un objeto en el archivo se conbfigura de la siguiente manera

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports= {
  output: {
    filename: 'app.bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

en los scripts del archivo package.json
se inserta el “build”: “webpack” sonde se va a costruir toda la aplicacion pero al indicar que es webpack siempre va a direccionar a src/index.js este hara que se generaren archivos en la carpeta de dist

se instala el sevridor de webpack

npm install webpack-dev-server --save-dev

Hola, necesito ayuda, no puedo hacer la carpeta dist de la manera en la que se especifica 😕 alguien tiene el mismo problema 😦?

agregar en el module.exports de weback.config.js

mode: “development”,

Si por algún casual a alguna persona le da errores al cargar la aplicación en npm run dev, he tenido que añadir lo siguiente a mi webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  output: {
    filename: 'app.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

mode: “development”

Tuve un error porque no tenia declarado el “mode” en el archivo de webpack.config.js
Lo solucione de la siguiente manera:

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
  output: {
    filename: 'app.bundle.js'
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

El modo puede ser “development” o “production”.

Saludos!

Si al ejecutar…

$ npm run dev

… tienes este problema

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Solo debes agregar al archivo de configuración

mode: 'development'

Con lo cual quedaría algo como esto
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    output: {
        filename: 'app.bundle.js'
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

Si alguien tiene este problema "The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value."
puede solucionar escribiendo esto en el webpack.config

module.exports = {
output: {
filename: “app.bundle.js”,
},
plugins: [new HtmlWebpackPlugin()],
mode: “development”,
};

En la descripción del curso está escrito “wepack” o sea sin la “b”, corrijanlo porfa

En la actualidad debes ponerle el modo que va a usar

modo produccion Compilado

webpack server --mode production

Modo DEV para debugear

webpack server --mode development

Tambien tuve problemas con el npm run dev

lo cual modifique el script de dev segun la documentación oficial

"dev": "webpack-dev-server --open --mode=development"

Al fin tecnologías nuevas a aprender 😄

SI TIENES ESTE ERROR

EN EL ARCHIVO webpack.config.js TENER

<// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
        
        mode: 'development',
        output: {
                filename: 'app.bundle.js'
        },
        plugins: [
                new HtmlWebpackPlugin()
        ]
}> 

Si les tira error al abrir el server pueden probar cambiando la configuración de los puertos desde webpack.config.js

module.exports = {
...
  devServer: {
    port:3005,
    open: true
  },
...
}

SI tienen problemas al ejecutar

npm run dev

Se debe a que hay que especificar en scripts el modo en el que se va a abrir el servidor de webpack de la siguiente forma:

"dev":"webpack serve --open --mode development",

Genial

El comando deberia ir asi cuando estamos en la raiz
./node_modules/.bin/webpack ./src/index.js

el dolor de cabeza en cursos con mas de un año es que para instalar webpack dependencias etc es un dolor balls

Tengo este error al correr npm run dev

"devDependencies": { "@webpack-cli/serve": "^1.0.1", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.0", "webpack": "^5.0.0", "webpack-cli": "^4.0.0", "webpack-dev-server": "^3.11.0" },

internal/modules/cjs/loader.js:895
throw err;
^
Error: Cannot find module ‘webpack-cli/bin/config-yargs’

¡Saludos! Por favor quisiera su ayuda con respecto al siguiente error que aparece cuando ejecuto npm run build:

Para iniciar automáticamente el proyecto en el navegador pueden agregar en el archivo webpack.config.js:
Saludos

devServer:{
  open:true
 }

Si al querer instalar el webpack-dev-server les arroja un error:

npm ERR! code ERESOLVE
npm ERR! Cannot read property 'length' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hectormr206\AppData\Local\npm-cache\_logs\2020-11-27T02_20_03_082Z-debug.log

Lo pude solucionar ejecutando:

npm install webpack-dev-server --save-dev --legacy-peer-deps

“./node_modules/.bin/webpack” ./src/index.js
me sirvió correr así el comando ^^

Me funciono con el siguiente script

npx webpack ./src/index.js

en windows.

Please update webpack-cli to v4 and use webpack serve to run webpack-dev-server

script dev => “dev”: “webpack serve”

Tengo el siguiente error:

Error: Cannot find module 'webpack-cli/bin/config-yargs

No se a que se refiera, esto al ejecutar:

npm run dev

Tengo este error cuando pongo

./node_modules/.bin/webpack src/index.js

y no se me crea la carpeta dist, ¿Que tengo que hacer?

![](

Esto si que es avanzado, me sorprende la dinámica, con conceptos ya bastante sólidos.

Esto esta fenomenal, aumentando el nivel pro con React con ayuda del empaquetamiento.

Excelente. Justo lo que necesitaba.

Excelente!

yo tengo este problema

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 522 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.

Todo perfecto hasta el minuto 4:19 en donde se ejecuta en consola el comando npm run build
pero no me genera los archivos dentro de la carpeta dist.
y ahi ya no puedo seguir el curso.
La consola arroja este cartel

voy a ver si puedo seguir

Excelente curso parece… muy prometedor!!

Cada vez que intento ejecutar el comando de npm run build me sale el mismo mensaje y no me crear los archivos

Maravillos clase estoy super motivado, maximo esfuerzo!!

Yo viendo como todo el curso de leonidas de Webpack lo recordè en 6:04 minutos JAJAJAJAJ

Hola, tengo un problema, el servidor local corre perfecto pero por alguna razón, el console.log nunca llega

https://github.com/maoacr/petgram

Podrían ayudarme a mirar que pasa ?

-D significa --save-dev (esto significa guardar como dependencia de desarrollo)

i es de install

npm install webpack webpack-cli -D

npm i html-webpack-plugin -D

Excelente! Empezando el curso con todos los animos

Pasos para iniciar nuestro proyecto:

Paso 1: Vamos a clonar el repositorio desde github.com/midudev/curso-platzi-react-avanzado usando git clone URL_DEL_REPO en nuestra consola.
Paso 2: Vamos a instalar webpack y webpack-cli como dependencias de desarrollo con: npm i webpack wepack-cli --save-dev.
Paso 3: Crearemos una carpeta llama src y dentro de ella un archivo index.js en el cual colocaremos solo un console.log(‘Empezamos el curso!’).
Paso 4: Crearemos en el root de nuestro proyecto un archivo webpack.config.js el cual tendrá toda la configuración de webpack
Paso 5: Instalaremos html-webpack-plugin con: npm i html-webpack-plugin --save-dev.
Paso 6: Instalaremos webpack-dev-server con: npm i webpack-dev-server --save-dev.
Paso 7: Añadiremos un nuevo script llamado dev: “dev”: “webpack-dev-server”.

No consigo instalar webpack, alguien sabe cómo puede arreglar este error?

<Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 3e67c8f4a291a95f8846
Version: webpack 4.41.5
Time: 53ms
Built at: 01/03/2020 9:05:14 PM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve 'src/index.js' in '/home/hab11/Documents/development/platzi'>

Hola, como el buen animal sin vida que soy, perdí 3 horas de mi vida probando la automatización de este procedimiento, se me hicieron bastantes pasos, y vi que me da flojera, me va quitar tiempo hacer todos esos pasos, bien de igual forma aquí se les dejo el código para que con un comando dejen todo listo.
https://github.com/paching12/webpack-automation

Aún no subo las instrucciones así que por favor es un archivo de shellScript para los que no esten familiarizados, solo descarguenlo coloquenlo en su home (~/) y enlacenlo en su archivo ubicado en ~/.bash_profile (o equivalente, .zshrc, .bashrc ubicados igualmente en home <<cd ~>>) obviamente no sirve en window y para mac deberán añadir -e a la instrucción sed en todo el archivo donde sea usada esta instrucción, bueno espero no abrumarlos
¡Suerte!

Llevo 1h haciendo este video. 1H que inútil me siento cielos santo

Hola al ejecutar npm run build, no me salen los archivos, que puedo hacer?

[email protected] build /mnt/c/Users/SAMSUNG/Documents/PLATZI/REACT AVANZADO/curso-platzi-react-avanzado
webpack

Hash: 161a9f7a6359311baf76
Version: webpack 4.44.1
Time: 93ms
Built at: 08/24/2020 11:46:25 PM
Asset Size Chunks Chunk Names
main.js 963 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 35 bytes {0} [built]

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Todos estos comandos hacen lo mismo 😃 esta bueno conocer alternativas para cuando las vemos no confundirnos

npm i webpack webpack-cli -D
npm add webpack webpack-cli -D 
npm install webpack webpack-cli --save-dev 

Si tienes el siguiente error al correr npm run build:

[webpack-cli] Error: Cannot find module 'loader-utils'

Intala loader-utils pero no como dependencia de desarrollo

npm i loader-utils

Con eso tu error se irá

Haber hecho previamente el curso de webpack hace que esto sea un repaso

Si tienen un warning que diga "webpack ‘mode’ option has not been set"
Yo lo arreglé poniendo en el webpack.config.js justo al principio, antesde OUTPUT, lo siguiente:

 mode: 'development',

Cuando se presentan errores, trato de observar que versiones tiene el profe en su archivo de package.json y coloco las mismas y luego corro npm install, casi siempre resulta exitoso

➡️TIP:
Si tienes el código html en una sola línea
Para darle formato en vertical con indentación ✔️
· Teclea sobre el archivo ⇧⌥F

· ó

1. Selecciona la línea con todo el código
2. Presiona: ⌘K ⌘F

![](

a lo que intento el comando me sale ese mensaje y no me deja avanzar :'v

en webpack 5 no me funciona esta sentencia node_modules/.bin/webpack/src/index.js

práctica:

tengo este error > [email protected] start:dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado

webpack-dev-server

TypeError: validateOptions is not a function
at new Server (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/Server.js:57:5)
at startDevServer (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:dev: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/matespinosa09/.npm/_logs/2020-11-07T19_22_28_965Z-debug.log
➜ curso-platzi-react-avanzado git:(master) ✗ npm run start:dev

[email protected] start:dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado
webpack-dev-server

TypeError: validateOptions is not a function
at new Server (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/Server.js:57:5)
at startDevServer (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3
at /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/curso-platzi-react-avanzado/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:dev: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/matespinosa09/.npm/_logs/2020-11-07T19_25_12_465Z-debug.log
➜ curso-platzi-react-avanzado git:(master) ✗

Os passo mi config por porque a mi no me iba:

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    devServer: {
        contentBase: __dirname + "/dist/",
        inline: true,
        host: '0.0.0.0',
        port: 8080,
        publicPath: '/dist'
      },
        output: {
                filename: 'app.bundle.js'
        },
        plugins: [
                new HtmlWebpackPlugin()
        ]
}```
en package.json

“dev”: “webpack serve”,```

He tenido muchos problemas con esta parte miles de veces. Hay ciertas veces que no me crea la carpeta dist. Otras que avanzo un poco más con el proyecto hasta llegar al punto de utilizar Graph QL. Me gustaría poder hacer el proyecto pero no puedo avanzar