Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Crear el Home

5/16
Recursos

Aportes 123

Preguntas 46

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Script correcto.

"scripts": {
    "build":"webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },

webpack,config.js

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module:{
        rules:[{
            test: /\.js?$/,
            exclude: /node_modules/,
            use:{
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebPackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]

}

Si el main en dist te crea solo con el console.log(鈥淗ello鈥), esto se debe a un problema con las versiones de Webpack
Haz lo siguiente en la terminal (en el current workspace):
`

npm uninstall wepback
npm uninstall wepback-cli

`

Lo que pas贸 fue que borraron las versiones desactualizadas
Ahora se intalar谩 lo correcto con el siguiente comando:
`

npm i [email protected] [email protected]
`

Esta soluci贸n la encontr贸 marcelo-vargas-avila, pero como estaba en un hilo aparte decid铆 ponerla ac谩 jaja

Para los que tienen el problema que tras correr el comando 鈥渘pm run build鈥 el arcivo main.js les queda igual que el archivo index.js aca esta el 驴por que?..

1)Tras la actualizacion a webpack 5 debemos instalar las siguientes dependdencias de babel: 鈥渘pm install @babel/core babel-loader @babel/preset-env鈥.

2)Luego debemos generar en la raiz del proyecto el archivo 鈥渂abel.config.json鈥 alli debemos agregar lo siguiente:

{
  "presets": [
    "@babel/preset-env"
  ]
}

  1. Luego vamos al archivo "webpack.config.js y agregamos la siguiente regla:
      { // Estructura de Babel
        test: /\.m?js$/, //Nos permite identificar los archivos seg煤n se encuentran en nuestro entorno.
        exclude: /node_modules/, //Excluimos la carpeta de node modules
        use: {
          loader: 'babel-loader',//Utilizar un loader como configuraci贸n establecida.
          }
      }

Al llegar a este paso y correr el comando 鈥渘pm run build鈥 se daran cuenta de que sigue igual el resultado de main.js, y es porque tras la actualizacion, babel solo agrega el resto de codigo cuando usamos sintaxys moderna de JavaScripts.

Como prueba agreguen el siguiente codigo en el archivo index.js:

console.log("Hello webpack!");

const fancyFunc = () => {
  return [1, 2];
};

const [a, b] = fancyFunc();

Ahora compilen y veran que el archivo main.js si viene completo, porque estamos empleando una arrow function y es necesario hacer el codigo compatible con el resto de navegadores鈥

Alguien sabe porque mi main.js se cre贸 solo con el console.log('Hello');
es normal? Es que a Oscar se le cre贸 con m谩s c贸digo.

Les comparto esta herramienta online que nos ayuda para crear un archivo .gitignore https://www.gitignore.io/

al d铆a de hoy este script no funciona

"scripts": {
    "dev": "webpack-dev-server --open --mode development"
  },

en mi caso fue posible de esta forma

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

esta configuraci贸n tambi茅n la puedes crear en webpack

mode: 'development',
devServer: {
   port: 9000,
   open: true
},

nuestro script quedar铆a de la siguiente forma

"scripts": {
鈥dev鈥: 鈥渨ebpack serve鈥
},

Este curso y el de webpack deben ser revisados urgentemente para su actualizacion.

Siento que no entiendo ni mergas鈥 hab铆a dejado js por una semana por hacer el curso de mobile first y por que estuve en cama, pero siento que est谩 muy complejo esto, no se si es el profe o yo, no se como hay gente que le entiende todo, ser谩n nuevos o ya habr谩n visto esto con otros profes, en la vida real, etc鈥usto hoy ve铆a el video de Freddy donde hablaba de la decepci贸n realista, y hay que sobrepasarlo que es crucial ese punto, se me aparecen de vez, en cuando y seguir谩n haci茅ndolo seguro鈥o quiero quedarme solo en html, css y js b谩sico la verdad, as铆 que continuar茅鈥

MI SOLUCI脫N PARA LOS PROBLEMAS QUE TUVE AL HACERLO EN EL 2021

1.- INICIE DESDE 0 E INSTALE CADA UNO DE LOS COMPONENTES QUE NECESITABA EN FUNCI脫N DE LA INFORMACI脫N DISPONIBLE, CON ESTOS CODIGOS

npm install -D babel-loader @babel/core @babel/preset-env --save-dev
npm i [email protected] webpack-cli@3
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-cli

2.- EL FORMATO DEL ARCHIVO WEBPACK.COFIG LO HICE SOLO CON UNA LEVE MODIFICACI脫N

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

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/dist',
      filename: 'main.js'
    },
    
    resolve: {
      extensions: ['.js'],  
    },
    
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
      new HtmlWebpackPlugin([
          {
              inject:true,
              template:'./public/index.html',
              filename: './index.html'
          }
      ])
    ]
  }

Veo una inconsistencia a la hora de las dependencias instaladas, todas est谩n desactualizadas y no existe un lugar en los cursos donde den una respuesta r谩pida para poder seguir con el curso, comprendo que fomenta la lectura, pero dada las circunstancias de la manera de explicar de los profesores, en varios cursos se mezclan temas que uno no los toc贸 de cerca, en lo personal me gustar铆a una red de respuestas m谩s cercana.

Para los que les parezca un error por no encontrar index.js a la hora de ejecutar el script build, en mi caso lo resolv铆 poniendo una diagonal en el archivo webpack de esta forma.

entry: './src/index.js',

Actualizado a diciembre del 2021

  • Comando para instalar las dependencias:

npm i @babel/core babel-loader @babel/preset-env html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

  • Configuraciones para el archivo webpack.config.js:


// Permitir traer path. Acceder dentro de la carpte no importa el lugar donde se encuentre
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js'],
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {targets: "defaults"}]
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html'
            }
        ])
    ]
}

  • Scripts en el archivo package.json:

"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"

Sospecho que el profesor arregla ciertos errores sin mostrarlos, varias veces con 茅l me arroja error a lo que a 茅l s铆 le funciona bien. En este caso no es --modo sino --mode.

驴mi main.js me regresa tal cual lo que escribo en el src/index.js?

tendran alguna idea de por que

Qu茅 plugin utiliza para que se le cierren las etiquetas html dentro de las comillas francesas?

Webpack5 webpack-cli4 presentar谩 errores, (Curso desactualizado).
Desinstalar ambas con npm uninstall wepback y npm uninstall wepback-cli, luego instalar las versiones espec铆ficas con el siguiente comando npm i [email protected] [email protected] .

AGOSTO 2021. He recopilado soluciones.

Si el archivo main.js se te queda igual y no se te crea el archivo index.html. Haz esto:

  1. Desinstala las dependencias corriendo esto en el terminal:
npm uninstall wepback
npm uninstall wepback-cli
npm uninstall html-webpack-plugin
  1. Instala de nuevo estas:
npm i webpack@4 webpack-cli@3
npm i html-webpack-plugin@4
  1. Saca el archivo webpack.config.js de la carpeta src y ponlo en la ra铆z, fuera de todas las carpetas.

Vuelve a probar.

Los comando que recomiendo Iv谩n est谩n bien pero ahora surge el problema de que no son compatibles con el html-webpack-plugin, pero es f谩cil resolverlo:

des铆stala el html-webpack-plugin con:

  • npm uninstall html-webpack-plugin

y ahora instala la versi贸n compatible con webpack:

y listo vuelve a correr tu npm run build y todo de maravilla.

Me pueden apoyar con este error al** ejecutar npm run build**

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: webpack --mode production
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build 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! C:\Users\xaavi\AppData\Roaming\npm-cache_logs\2020-04-09T22_09_36_271Z-debug.log

Archivo package.json

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "Single Page Application",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "Javascript"
  ],
  "author": "Javier Qui帽ones <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js'],
    },
    //SETTING BABLE RULES
    module: {
        rules: [
            {
                // SETTING REGEX FOR .JS FILES
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    //SETTING PLUGINS
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]
}```

es un poco avanzado鈥 diento que no entiendo bien como hacer una app spa 鈥 馃槮

Avanzandoo鈥

Buenas tengo en el main.js me copia exactamente la misma linea de codigo del index.js

alguien tiene alguna solucion

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"

  }
//Nos permite acceder a donde est谩mos en las carpetas. Ya sea en local o en la nube.
const path = require('path');
//Archivo necesario para trabajar con HTML que lo requerimos del paquete que instalamos
const HtmlWebPackPlugin = require('html-webpack-plugin');

//Aqu铆 se encuentra toda la configuraci贸n de lo que va a suceder y sera el modulo para exportar.
module.exports = {
    //Punto de entrada con su direcci贸n y es aqu铆 donde vive el c贸digo inicial y de aqu铆 parte al desarrollo.
    entry: './src/index.js',
    //Donde se env铆a el proyecto estructurado y compilado listo para producci贸n, este sera un objeto
    output:{
        //Ponemos la ruta del lugar donde se exportara el proyecto, usando el path que importamos
        //con el dirname le decimos que donde se encuentre esta carpeta ahi creara la carpeta dist = distribution
        path: path.resolve(__dirname, 'dist'),
        /*le diremos como se llamaremos el archivo que vamos a crear donde estara el compilado final cuando
        envienmos a produccion*/
        filename: 'main.js'
    },
    /*trabajaremos sobre las extenciones que va a utilizar nuestro proyecto donde usaremos resolve
    generando otro objeto*/
    resolve: {
        /*Pasamos un arreglo de las extenciones que vamos a utilizar*/
        extensions: ['.js'],
    },
    /*creamos un modulo con las reglas necesarias de babel*/
    module:{
        /*estas seran las reglas que pasaremos por medio de un arreglo*/
        rules: [
            //Elementos que necesitamos
            {
                /*Estructura de babel generando un test de como vamos a identificar estos archivos*/
                /*test que va a tener regex para establecer valores que queremos filtral de una ruta,
                de unos elementos o de los archivos que vamos a estar utilizando 
                / punto de entrada - extenciones js */
                test: /\.js?$/,
                //Exluimos la carpeta node_modules y todos los archivos js
                exclude: /node_modules/,
                /*utilizamos un loader o una configuracion establecida para trabajar todo nuestro codigo
                y es que el loader que instalamos de babel*/
                use: {
                    loader: 'babel-loader',
                }
            }

        ]
    },
    //necestiamos establecer los plugin que vamos a utilizar
    /*webpack plugin de html que nos va a permitir trabajar con estos archivos pasando un arreglo*/
    plugins: [
        /*instanciamos el plugin de html que instanciamos a inicio de este documento, pasandoles un 
        arreglo y despues un objeto que vamos a llenar con la configuracion*/
        new HtmlWebPackPlugin([
            {
                //inject como vamos a un archivo html a injectar un valor 
                inject: true,
                //necesimos un template principal y le damos una ruta de este template base de html
                template: './public/index.html',
                /*ahora le decimos donde tiene que guardarlo y seria nuestra carpeta dist donde le damos
                un nombre*/
                filename: './index.html',
            }
        ])

    ]
}```


Pues no s茅 por qu茅 pero cuando corria el script build la consola me decia que no encontraba el entrypoint, so, lo declare mas especificamente en el archivo webpack y fucncion贸. PD: ser谩 porque estoy usando windows? 馃

...
  entry: path.resolve(__dirname, './src/index.js'),
...

Porque el header va dentro de la clase Main?

Para realizar el curso con los m贸dulos actualizados pueden seguir este proceso (fue tomado de varios de los post y de la lectura de la documentaci贸n):

  1. Inicializar el proyecto de NPM:
npm init -y
  1. Instalaci贸n de los paquetes NPM:
npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev
  1. El archivo 鈥榩ackage.json鈥 debe contener lo siguiente:
    {
        "name": "single-page-application",
        "version": "1.0.0",
        "description": "Curso de Platzi - Single Page Application",
        "main": "index.js",
        "scripts": {
            "watch": "webpack --watch",
            "build": "webpack --mode production",
            "start": "webpack serve --open --mode development"
        },
        "repository": {
            "type": "git",
            "url": "git+https://github.com/kannder83/single-page-application.git"
        },
        "keywords": [],
        "author": "kannder83 <[email protected]>",
        "license": "MIT",
        "bugs": {
            "url": "https://github.com/kannder83/single-page-application/issues"
        },
        "homepage": "https://github.com/kannder83/single-page-application#readme",
        "devDependencies": {
            "@babel/core": "^7.14.6",
            "@babel/preset-env": "^7.14.7",
            "babel-loader": "^8.2.2",
            "html-webpack-plugin": "^5.3.2",
            "webpack": "^5.42.1",
            "webpack-cli": "^4.7.2"
        }
    }
  1. Crear el archivo de configuraci贸n de webpack:
touch webpack.config.js
  1. Dejar dentro del archivo 鈥榳ebpack.config.js鈥 la siguiente configuraci贸n:
    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    devServer: {
        contentBase: "./dist",
    },
    plugins: [
        new HtmlWebpackPlugin({
        inject: true,
        template: "./public/index.html",
        filename: "./index.html",
        }),
    ],
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"],
            },
            },
        },
        ],
    },
    };
  1. Crear archivo de configuraci贸n de Babel:
	touch babel.config.json
  1. Agregar la siguiente informaci贸n:
    {
    "presets": ["@babel/preset-env"]
    }
  1. Crear la carpeta 鈥榮rc鈥 y archivo en la carpeta 鈥榠ndex.js鈥:
    mkdir src
    touch src/index.js
  1. Ejecutar el comando 鈥榖uild鈥 para crear los archivos:
	npm run build

Puede que el curso este desactualizado, pero v茅anlo como un reto para seguir.

const Home = () => {
    const view = `
        <div class="Characters">
            <article class="Character-item">
                <a href="#/1/">
                    <img src="image" alt="name">
                    <h2>Name</h2>
                </a>
            </article>
        <div>
    `;
    return view;
};

export default Home;```

MUY IMPORTANTE!!

para solucionar el problema que no genera el archivo index.html
Saquen el archivo 篓webpack.config.js篓 de la carpeta 篓src篓 y ponganlo en la raiz, o sea fuera de todas las capertas. debe estar a compa帽ando a las carpetas, y no dentro de ning煤na.

son cosas de la nueva versi贸n

AYUDA! El comando npm run build no me genera el archivo index.html dentro de la carpeta dist.
Me genera la carpeta dist y un archivo main.js, pero el index.html no!
(Tengo el template del index.html dentro de la carpeta public)

Este es el codigo del webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin([
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ])
  ]
}

Y este es el package.json

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page aplication",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Hefes",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.9.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}```
El archivo .gitignore lo pueden crear tambi茅n en gitignore.io

A mi no me funcionan la verdad, tenia que instalar mas dependencias para que no me diera error, os dejo mi packge.json

 "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }

Con esto instalado todo funcion贸 correctamente. Espero que os sirva.

Para todos los que est茅n iniciando este curso despu茅s de a帽os de haber salido, tendr谩n problemas si instalan las versiones actualizadas y colocan configuraciones desactualizadas.
Lo 鈥渕ejor鈥, para poder seguir el curso sin problemas, es colocar las mismas dependencias que el profesor, si van al package.json que est谩 en los recursos de la clase, podr谩n copiarlos.
En este caso son estos:

鈥渄evDependencies鈥: {
"@babel/core": 鈥淾7.7.5鈥,
鈥渂abel-loader鈥: 鈥淾8.0.6鈥,
鈥渉tml-webpack-plugin鈥: 鈥淾3.2.0鈥,
鈥渨ebpack鈥: 鈥淾4.41.2鈥,
鈥渨ebpack-cli鈥: 鈥淾3.3.10鈥,
鈥渨ebpack-dev-server鈥: 鈥淾3.9.0鈥
}

Primero borren su carpeta 鈥渘ode_modules鈥 y, despu茅s de haber pegado estas dev dependencies en su package.json (tambi茅n debes borrar las devDependencies que tengas anteriormente antes de pegar 茅stas), ejecuten el comando 鈥渘pm isntall鈥, lo cual, har谩 que se instalen todas las dependencias en su package.json, con dichas versiones desctualizadas.
Debido a que, son versiones con paquetes 鈥渙bsoletos鈥, npm avisar谩 que tienen vulnerabilidades, pero b谩sicamente es por estos paquetes en estado deprecated.
Por 煤ltimo, dentro del archivo webpack.config.js me marcaba alg煤n tipo de error en:

test: /.js?$/

脡ste lo cambi茅 a:

test: /.m?js$/,

Despu茅s de haber hecho todo esto pude trabajar sin problemas, espero les sirva. 馃槄馃槄馃槄

casi despu茅s de 1 hora resolviendo errores de ortograf铆a Dios ajjajaja

Cuando escribimos en el template, suele ser molesto el hecho de tener que escribir dos veces las etiquetas html, la de inicio y la de cierre. Para escribir esto solo una vez, lo que hay que hacer es primero escribir las dos llaves <></> y despu茅s solo escribir en la llave de cierre, as铆 la llave de inicio se escribe al mismo tiempo

En mi script del package.json puse de la siguiente manera:

"start": "webpack serve --open --mode development"

Y en mi configuraci贸n de Webpack agregue lo siguiente:

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

Ahora cada vez que se ejecute el script, este se abrir谩 en mi navegador por default.

Muchachos, si el error del NPM RUN BUILD persiste luego de bajar las versiones de webpack y webpack-cli鈥 Tambi茅n deben bajar la versi贸n del html-webpack-plugin !
npm uninstall html-webpack-plugin
npm i [email protected]
Espero les sirva鈥 yo hab铆a intentado todo y esto lo solucion贸!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cientifico</title>
</head>
<body>
    <main class="Main">
        <header class="Header" id="Header">
            <section id="Content">
                <div class="loading"></div>
            </section>

        </header>
    </main>
</body>
</html>```

Instalar estas versiones para evitar problemas: npm i [email protected] [email protected]

crea el js, pero no me crea el index.html en dist

Yo veo que el Profe siempre pone
{

}; el punto y coma ac谩 pero en un curso de Freddy creo que el programaci贸n b谩sica el dice que ah铆 no es necesario ponerlo, es solo una costumbre del profe o si hay que ponerlo ahora por buena practica o algo asi?

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "single page application",
    "javascript"
  ],
  "author": "Fernando Cordero",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

La carpeta dist crea el main.js pero no me crea el index.html
Alguien sabe por que?

Ademas de cambiar modo por mode, creo que uno de los principales errores es la ruta donde creamos los archivos, verifiquen que sea la correcta!

La especialidad de este 鈥減rofe鈥 es hacerlo todo a las prisas, a las carreras, sin explicar bien y con muchos errores, el curso est谩 desactualizado y de no ser por las colaboraciones de los alumnos no seria posible continuarlo, por que el profe no se tomo la molestia de siquiera poner las correcciones en los comentarios 鈥 mal ah铆 ,

https://platzi.com/clases/1787-spa-javascript/25884-crear-el-home/?time=471

Un tip:

Al momento de crear el template dentro del archivo JS recomiendo en VSCODE presionar las teclas Ctrl+K M (CMD+K M en Mac) y cambiar el modo a HTML, con esto tendras todas la bondades del editor al escribir la plantilla de HTML, o bien lo puedes cambiar de manera manual seleccionando el lenguage de Javascript a HTML en la parte inferior derecha.

Al momento de terminar la edicion de la plantilla solo hace falta cambiar el modo de nuevo a Javascript y listo!

muy buena clase

Otro shortcut para crear la estructura base de html es presionar ! y luego tab

Una manera mas sencilla de poner el contenido base en todos los archivos con extensi贸n html es solo poniendo ! y un tab, y as铆 se pone todo lo que se pondr铆a con un html:5

Aqu铆 todo lo que deber铆a contener un archivo .gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

Nueva forma de escribir el plugin de html:

  plugins: [
    new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        filename: './index.html'
    })
  ]

Estructura emmet, copian en vscode y luego tab:

main.Main>header.Header#header>section#content>div.loading
const home=() => {
    const view=`
    <div class="Characters">
        <article class="Character-item">
            <a href="#/1/">
            <img src="image" alt="name">
            <h2>Name</h2>
            </a>
        </article>
    </div>
    `
}

Nunca les habia tomado tanta importancia a las ArrowFunctions hasta ahora , es el curso perfecto para implementar js en el mundo real o proyectos

Me pregunto si sera posible en lugar de escribir el template en comillas francesas, importar el template desde un html, de esta manera evitariamos problemas de sintaxis y el IDE ayudaria con la labor de escritura.

PARA LOS QUE NO LES CREA EL INDEX.HTML EN LA CARPETA DIST

MUEVAN WEBPACK.CONFIG.JS A LA RA脥Z DEL PROYECTO Y VUELVAN A CORRER LA BUILD

dale like para que m谩s gente lo vea, es un error com煤n pero mal documentado en los comentarios 馃槂

Tenia el error de que me generaba el main.js pero no el index.html y el error es que en la configuraci贸n de webpack puse module.export en lugar de moduler.exports
Esa 鈥榮鈥 fu茅 mi error xD

me dice esto no entiendo que hice mal, lo envio haci porque no se como enviar el screenshot por aqui

WARNING in configuration
The 鈥榤ode鈥 option has not been set, webpack will fallback to 鈥榩roduction鈥 for this value. Set 鈥榤ode鈥 option to 鈥榙evelopment鈥 or 鈥榩roduction鈥 to enable defaultsfor each environment.
You can also set it to 鈥榥one鈥 to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Child html-webpack-plugin for 鈥渋ndex.html鈥:
1 asset
Entrypoint undefined = index.html
4 modules

Tambi茅n podemos ocupar el shortcut ! + Tab para crear la misma estructura de HTML, es un poco m谩s corto 馃榾

En vez de crear una constante llamada view y luego retornarla, 驴se hubiera podido retornar directamente el c贸digo entre comillas francesas?

Estaria muy loco haceer todo esto con web-components los cuales son propios de JS

como puedo hacer screenshot al codigo y enviarlo ?

驴Alguien puede ayudarme? Me sale este error al momento de escribir el comando 鈥渘pm run build鈥

OJO, La linea correcta es:
鈥渂uild鈥: 鈥渨ebpack --mode production鈥,

en el video tiene un error por que dice 鈥溾搈odo鈥, es con E=mode

vamos, se va poniendo interesante el curso!

PD: en el archivo de package.json donde se escriben los scripts es --mode no --modo ;D

  • Crear .gitignore para que ignore los node_modules
  • Crea los scrips en package.json de produccion y development
  • Crea el archivo template de html y crea su contenido con html:5, ademas de agregar algunas secciones y el tag de js vinculado al main.js compilado
  • Corre el script npm run build para obtener la carpeta dist con el codigo compilado
  • Crea el componente de home

Mi VScode a帽adio automaticamente el gitignore. Curioso.

Me aparece este error cuando ejecuto el comando 鈥渘pm run build鈥

Al intentar correr el comando npm run build me aparece que los m+odulos est谩n obsoletos y nunca me aparece el archivo dist

mensaje en terminal:

C:\xampp\htdocs\100tifi.co>npm run build

> 100tifi.co@1.0.0 build C:\xampp\htdocs\100tifi.co
> npm install webpack --mode production

npm WARN deprecated request@2.12.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated CSSselect@0.7.0: the module is now available as 'css-select'
npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what'
npm WARN 100tifi.co@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ production@0.0.2
+ webpack@4.42.1
updated 2 packages and audited 9351 packages in 15.467s

23 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

package.json:

{
  "name": "100tifi.co",
  "version": "1.0.0",
  "description": "Single Page Application",
  "main": "index.js",
  "scripts": {
    "build": "npm install webpack --modo production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Juan Daniel Martinez <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "production": "0.0.2"
  }
}

webpack.config.js:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './src/index.js'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebPackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]
}

Hola compa帽eros, tengo este error al compilar el build con npm:


> [email protected]1.0.0 build /home/crodfranco/Documents/cientifico
> webpack --mode production

sh: 1: webpack: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected]1.0.0 build: `webpack --mode production`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Este es el debugger:

info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]6.14.4
3 info using node@v12.16.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]1.0.0~prebuild: [email protected]1.0.0
6 info lifecycle [email protected]1.0.0~build: [email protected]1.0.0
7 verbose lifecycle [email protected]1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/crodfranco/Documents/cientifico/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]1.0.0~build: CWD: /home/crodfranco/Documents/cientifico
10 silly lifecycle [email protected]1.0.0~build: Args: [ '-c', 'webpack --mode production' ]
11 info lifecycle [email protected]1.0.0~build: Failed to exec build script
12 verbose stack Error: [email protected]1.0.0 build: `webpack --mode production`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:310:20)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
13 verbose pkgid [email protected]1.0.0
14 verbose cwd /home/crodfranco/Documents/cientifico
15 verbose Linux 5.3.0-46-generic
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
17 verbose node v12.16.2
18 verbose npm  v6.14.4
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error [email protected]1.0.0 build: `webpack --mode production`
23 error spawn ENOENT
24 error Failed at the [email protected]1.0.0 build script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Help!!! Pues ya me dieron las 3 am y nom谩s no encuentro el error 馃槮

webpack.config.js

<code>
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
/**archivo que se instalo y que es necesario para trabajar con html te permite acceder a las carpetas */

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
       /*nombre del archivo para produccion*/
        filename: 'main.js'
    },

    /**extensiones del proyecto*/

    resolve: {
        extensions: ['.js'],
    },

    module: {
        rules: [
            {
                /**estructura de babel */
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },

    /**plugins de html */
    plugins:  [
        new HtmlWebpackPlugin([
            {
            inject: true,
            template: './public/index.html',
            filename:'./index.html',
        }
    ])
    ]

}
</code>

Y el de package.json

<code>
{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript",
    "viri"
  ],
  "author": "vidibell",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "production": "0.0.2"
  }
}
</code>

veo que tengo un archivo que se llama package-lock.json eso tiene algo que ver? 馃槮

Wooooow

En que parte deben estar ubicadas el package-lock.jason y el package json, deben estar en la carpeta src o en la raiz ?

Hay un error en 鈥渕odo鈥 por mode. Si no les crea index.html en dist, revisen que webpack.config.js est茅 en la ra铆z del proyecto y lo corren de nuevo, en caso de que no.

Para comprender al 100% todo el curso. Me vi en la necesidad de tomar otros de la ruta conjuntamente con otros b谩sicos de javascript. Y estoy aqu铆, de nuevo repasando este ya con una mejor comprensi贸n.

Me sale el siguiente error en la consola al darle npm run build, a que se puede deber?

ReferenceError: html is not defined
    at Object.<anonymous> (C:\cientifico\webpack.config.js:2:36)
    at Module._compile (C:\cientifico\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (C:\cientifico\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at C:\cientifico\node_modules\webpack-cli\bin\cli.js:71:45
    at Object.parse (C:\cientifico\node_modules\yargs\yargs.js:567:18)
    at C:\cientifico\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\cientifico\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\cientifico\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE```

A seguir!

Me encanta tu dise帽o para codificar.
驴Alguien sabe cu谩l es?

por que me sale ese error

Hola a alguien le sale el error cuando corren npm run build?
Llevo su buen rato intentando de resolverlo y hasta ahora no puedo.

comparto el codigo de
carpeta: pages
archivo: home.js

const Home = () => {
    const view = `
        <div class="Characters">
            <article class="Characters-item">
                <a href="#/1/">
                    <img src"image" alt="name">
                    <h2>Name</h2>
                </a>
            </article>
        </div>
    `;
    return view;
}

export default Home; //permite identificar si puede ser usando dentro de otros archivos de JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cientifico</title>
</head>

<body>
    <main class="Main">
        <header class="Header" id="header">
        </header>
        <section id="content">
            <div class="loading"></div>
        </section>
    </main>
</body>

</html>```
npm run build```

Hay muchas que no entiendo鈥
Espero aclarar mis dudas durante el curso.

Record茅 los tiempos de servlet con java

Hola chicos y chicas.
Para los que les pase que no genera de ninguna forma (Ni con ayuda de los compa帽ero antes de mi) el index.html de produccion (dist/main.js, index.html) en la forma que a mi se resolvio fue borrar el proyecto entero y volver a hacerlo de nuevo desde 0 pero ahora teniendo npm 11 o superiores ( **o usando nvm **) en mi caso fue npm 12.18.2 y asi si se mando a crear index.html en la carpeta dist en produccion.

Gracias por su Atencion.

Hola, Requiero su ayuda!
No logro generar la carpeta y archivo esperado, me aparece error en la terminal:

Captura de pantalla 2020-08-10 a la(s) 9.17.09 p. m鈥ng
Ya revis茅 todos los comentarios de esta clase y revise que todo est茅 en su lugar, que tenga mode en vez de modo鈥 agregue npm install antes de webpack鈥 pero nada, ac谩 mi codigo

webpack.config, js:



const path = require(鈥榩ath鈥)
const HtmlWebpackPlugin = require(鈥榟tml-webpack-plugin鈥)

module.exports = {
entry: 鈥./src/index.js鈥,
output: {
path: path.resolve(__dirname, 鈥榙ist鈥),
filename: 鈥榤ain.js鈥
},
resolve: {
extensions: [鈥.js鈥橾,
},
module: {
rules: [
{
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: 鈥榖abel-loader鈥,
}
}
]
},
plugins: [
new HtmlWebpackPlugin([
{
inject: true,
template: 鈥./public/index.html鈥,
filename: 鈥./index.html鈥
}
])
]
}

y el script en package.json:

鈥渟cripts鈥: {
鈥渂uild鈥: 鈥渘pm install webpack --mode production鈥,
鈥渟tart鈥: 鈥渨ebpack-dev-server --open --mode development鈥
},

Si alguien puede ayudarme se lo agradezco!!

驴qu茅 clase de react es 茅ste?

{
  "name": "rickandmorty",
  "version": "1.0.0",
  "description": "Single Page Aplication",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open -mode development"
  },
  "keywords": [
    "JavaScript"
  ],
  "author": "@LucyCampos",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.4.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Resumen de la clase :

Creando el Home

Debemos crear el archivo .gitignore

node_modules

Nos movemos al achivo package.json y ubicamos la seccion script. Estos nos van a permitir ejecutar comando en la terminal para realizar determinadas funciones.

El archivo debe quedar de la siguiente manera

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build" : "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Federico Herrera",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

Script:

build : para ejecutar nuestro codigo en modo produccion.

start : inicializa nuestro proyecto para ejecutarlo en un entorno de desarrollo local. Habilita un servidor y lo abre en el navegador.

Editamos nuestro index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cientifico</title> 
</head>
<body>
 
    <main class="Main">
        <header class="header" id="header">
            <section id=content>
                <div class="loading">
                </div>
            </section>
        </header>
    </main>

    
</body>
</html>

Corremos la ejecucion de nuestro proyecto.

npm run build

Debemos revisar en nuetro proyecto que se haya creado la carpeta dist

Nos movemos a la caperta /src/pages y creamos un archivo llamado home.js

const Home = () => {
    const view = `
    <div class="Characters">
        <article class="Character-item">
            <a href="#/1/">
                <img src="image" alt="name">
            </a>
        </article>
    </div>
    
    `;
    return view;
}

export default Home; // Permite que se pueda incluir dentro de otros archivos js

una vez creada la carpeta dist, en el archivo main.js al profesor le aparece bastante c贸digo, a mi solo me aparece una linea indentica a la del index.js que dice:
console.log(鈥淗ello鈥);
esto est谩 mal, supongo pero no s茅 el porqu茅

Para los que no les corra posiblemente tengan su error en los scripts, precisamente en build no es --modo sino --mode.

Ademas, si te sirve el codigo, pero no vez la carpeta dist en tu editor de codigo cierralo y vuelve a abrir

const Home = () => {
  const view = `
  <div class="Characters">
  <article class="Characters-item">
    <a href="#/1">
    <img src="image" alt="name"/>
    <h2>Name</h2>
    </a>
  </article>
  </div>

  `;
  return view;
};

export default Home;

A mi tambien me tira error, nisiquiera me compila el main.js en dist, me sigue saliendo un hola mundo

Me han dado muchos conflictos las dependencias as铆 que mejor instale las que el profesor usa en el video que son estas:

鈥淍babel/core鈥: 鈥淾7.7.5鈥,
鈥渂abel-loader鈥: 鈥淾8.0.6鈥,
鈥渉tml-webpack-plugin鈥: 鈥淾3.2.0鈥,
鈥渨ebpack鈥: 鈥淾4.41.2鈥,
鈥渨ebpack-cli鈥: 鈥淾3.3.10鈥,
鈥渨ebpack-dev-server鈥: 鈥淾3.9.0鈥

Si estan usando webpack 5 y no les genera correctamente el codigo en el main agreguen mode: 鈥榙evelopment鈥 en el module.exports

module.exports = { 
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js' 
    },```

Si alguien como yo tuvo el error de que en el index.js solo sal铆a el console.log pueden intentar remover las dependencias e instalar la versi贸n exacta con la que trabaja el profe

"devDependencies": {
    "@babel/core": "^7.7.5",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

Les recomiendo instalar las mismas versiones del profesor, para evitar problemas de compatibilidad:
.
npm install -D -E @babel/[email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]
npm install -D -E [email protected]

Tuve problemas usando npm run build, especificamente por el modulo html-webpack-plugin, les recomiendo instalar la version 4 usando el siguiente comando npm i [email protected]