Preparar Webpack

Les dejo el código con una explicación simple de lo que hace cada linea.

const path = require('path'); //Nos permite acceder a donde estámos en las carpetas. Ya sea en local o en la nube.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //Archivo necesario para trabajar con HTML.

module.exports = {  //Aquí se encuentra toda la configuración de lo que va a suceder. Modulo para exportar.
    entry: '.src/index.js', //Punto de entrada con su dirección.Aquí vive el código inicial y de aquí parte al desarrollo.
    output: { //Donde se envía el proyecto estructurado y compilado listo para producción.
        path: path.resolve(__dirname, 'dist'),  //Creamos el lugar dónde se exportará el proyecto.
        filename: 'main.js' //Este es el nombre del archivo final para producción.
    },
    resolve: {
        extensions: ['.js'], //Extensiones que vamos a utilizar.
    },
    module: { //Se crea un modulo con las reglas necesarias que vamos a utilizar.
        rules: [    //Reglas
            {   // Estructura de Babel
                test: /\,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.
                }
            }
        ]
    },
    plugins: [  //Establecemos los plugins que vamos a utilizar
        new HtmlWebpackPlugin([    //Permite trabajar con los archivos HTML
            {
                inject: true,   //Cómo vamos a inyectar un valor a un archivo HTML.
                template: './public/index.html',    //Dirección donde se encuentra el template principal
                filename: './index.html'    //El nombre que tendrá el archivo
            }
        ])
    ]
}```

comando para ahorrar tiempo

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

Uy jaja a por el curso de Webpack para entender lo que acabamos de hacer jaja

https://platzi.com/cursos/webpack/

Dependencias:

@babel/core : incluye toda la libreria de babel.

babel-loader : Este paquete permite transpilar archivos JavaScript utilizando Babel y webpack .

html-webpack-plugin: Permite copiar los archivos HTML del proyecto.

webpack-cli: Permite manejar ciertos comandos

webpack-dev-server : Permite crear un entorno de desarrollo local para probar los cambios que se esta realizando.

–save-dev : Permite instalar un conjunto de dependencia en la modalidad de desarrollo para el archivo packet jsom

Bueno quede así…

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]

Comparto la configuración:

// 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',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html'
            }
        ])
    ]
}

Les recomiendo antes tomar el curso de webpack, luego cuando vean esto se les hará fácil de entender como funcionan los loaders y los plugins. También entra más en detalle sobre lo que puedes hacer con babel

Acá explican más en detalle lo que están haciendo.

https://www.youtube.com/watch?v=FZBbX9f6b78

Yo estaba algo perdido con esta clase, vi este video seguí perdido pero con más contexto jajaja mentiras sí sirve para no hacer las cosas sin saber qué está haciendo uno.

se tarda bastante en instalar el babel en la terminal. Pónganle pausa y vayan por un cafesito

Notas de clase

const path = require('path');  //permite acceder donde nos estamos moviendo en el proyecto, no importa si es local o en la nube

const HtmlWebpackPlugin = require('html-webpack-plugin');        //Nos permite trabajar con html

//configuración de lo que va a suceder

module.exports = {
    //archivo de entrada o punto de entrada
    entry: '.src/index.js'
    //donde vamos a poner el proyecto estructurado, compilado y listo para producción -- output
    output: {
        path: path.resolve(__dirname, 'dist'),
        //nombre del archivo a generar, el que sale a producción
        filename: 'main.js'
    },
    //extensiones que utilizara nuestro proyecto
    resolve:{
        extensions: ['.js'],
    },
    //modulo con las reglas necesarias para trabajar
    //regla para babel
    module:{
        rules:[
            //son pasadas por un arreglo
            {
                //estructura de babel, requiere un test de como identificar los archivos
                //regex es una forma de establecer valores que queremos filtrar de una ruta, de unos elementos o archivos utilizados
                test: /\.js?$/,
                //excluye los archivos de lo que definamos
                exclude: /node_modules/,
                //configuración establecida para trabajar todo nuestro codigo
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    //plugins a utilizar
    plugins: [
        //webpackplugin que nos permite trabajar con los archivos html
        //instanciamos en la parte superior
        new HtmlWebpackPlugin([
            {
                //como voy a inyectar en un archivo html
                inject: true,
                //donde se encuentra en el template ppal
                template: './public/index.html',
                //a donde vamos a guardar este archivo y podemos darle un nombre
                fielname: './index.html',
            }
        ])
    ]
}

Se que no tiene que ver con el curso, pero ¿Que tema de VScode usas? Me gusta 😃

Les dejo una explicación de que significan cada una de las dependencias que instalamos:

@babel/core 
// Nos ayuda a compilar archivos

babel-loader
// Sirve para que babel trabaje bien con
// webpack

html-webpack-plugin
// Ayuda a que webpack empaquete y 
// optimice archivo html

webpack
// Es el empaquetador que va a 
// preparar nuestros archivos para
// produccion

webpack-cli
// Nos ayuda a usar webpack
// desde comandos en la terminal

webpack-dev-server
// Un servidor en local útil para
// ver cambios en tiempo real

Estoy siguiendo la escuela de desarrollo web y veo que el curso de webpack y el curso de postman estan más adelnate que este curso. deberian reajustar porque veo que muchos llegamos acá sin saber aún que es webpack.

si uno viene de la ruta de desarrollo web y salen con estas instalaciones y no se ha vista nada de eso antes, siento que entonces se deberia ajustar la ruta para que uno sepa que es todo eso

después de esto creo todos los que están viendo este curso tomaran religiosamente el curso de Webpack, porque todo me sonó a chino solo lo seguí, mas no entendí bien los comandos

Creo que ese agente ; no llegara de manera fácil, sin mas esfuerzo que solo esos tres cursos propuestos. Yo me voy a estudiar más antes de este curso, porque usan procedimientos y programas que ni he usado (GibHub - npm - webpack ->“menos”).

dijiste que hiriamos de la mano, ¿Qué son los flags de test.?

volvere cuando sepa de webpack!!!

Comando para instalar babel, webpack y entorno local:
npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

deberían actualizar este curso utilizando vite

Otra opción para los que se les complica “webpack” o no pueden instalarlo sin que su pc se queme (es mi caso), es vite, es un nuevo empaquetador y esta bueno, te hace la mayoría del trabajo y es super ligero. Si quieren pueden ver sus docs, lastimosamente es muy nuevo y no hay tantos videos en youtube y cosas asi 😦

https://vitejs.dev/

Otra opción es PERCEL
https://parceljs.org/

comandos para instalar babel y webpack:

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

const path = require('path') //permite hacia donde estamos dentro del directorio (l;ocal o nube)
const HtmlWebpackPlugin = require('html-webpack-plugin')  // Permite trabajar en el HTML

//Modulo que vamos a exprtar donde viene cada configuracion de lo que va a suceder

module.exports = {
    entry: './src/index.js', //punto de entrada, aqui vivira todo el codigo inicial
    output: {  //Donde se va a poner todo este poryecto compuilado listo para enviar a produccion. 
        path: path.resolve(__dirname, 'dist'), //Se encargara identificar donde se encuentre la carpeta y ahi poner otra carpeta 
        filename: 'main.js' //permite darle nombre al archivo que se va a generar una vez se compile el proyecto
    },
    resolve: {
        extensions: ['.js'] //usaran todas las extensiones que terminen en js
    }, 
    module: {
        rules: [
            {
                test: /\.js?$/, //Reject
                exclude: /node_modules/, //Exluir la carpeta de node_modules
                use: { //indicar que se va a utilizar una configuracion prestablecida
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([{ // se establece el template principal
            inject: true,
            template: './public/index.html',
            filename: './index.html',
        }
     ])
    ]

}

Paso el código por aquí

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: {
        extension: [".js"],
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: "./public/index.html",
                filename: "./index.html",
            }
        ])
    ]
}

Corremos en la terminal:

npm i @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server -D

Qué es babel?

Babel es una herramienta que nos permite transformar nuestro código JS de última generación (o con funcionalidades extras) a JS que cualquier navegador o versión de node.js entienda.

• @babel/core: Es el nucleo de babel, es el paquete que incluye babel
• babel-loader: Le indicará a webpack la forma en que tiene que manejar este modulo del código.
• html-webpack-plugin: Este plugin nos crea un archivo .html en nuestra carpeta dist y le inyecta el código .js que estaremos utilizando.
• webpack webpack-cli: Son los paquetes necesarios para implementar webpack en tu proyecto y a su vez utilizar los comandos de webpack en la terminal de comandos.
• webpack-dev-server: Nos provee un servidor de desarrollo para nuestro proyecto.

Archivo config.webpack.js

const path = require("path") //Viene en node, solo hace falta importarlo para usarlo
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: "./src/index.js",//Donde se encuentra mi archivo que será minificado 
    output: { 
        path: path.resolve(__dirname, "dist"),//La ruta de salida de mi archivo
        filename: "bundle.js"
    },
    resolve: {
        extension: [".js"],//Las extensiones que estaremos utilizando

    },
    module: {
        rules: [
            {
                test: /\.js$/i,//Regla para poder trabajar con babel
                exclude: /node_modules/i,
                use: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: "body",
            template: "./public/index.html",
        })
    ]
}

Recomendación: hagan el curso de webpack y complementen con estos dos videos y la lectura de la documenación. Cada vez que el profesor toque algo nuevo del webpack revisen la documentación para entender qué está haciendo. Cada plugin y loader tienen sus configuración.

Video 1: Module Bundlers Explained
Video 2: Webpack crash course

Si queremos añadir el autocompletado para nuestro archivo de webpack, podemos añadir el siguiente código antes del module.exports

/** @type {import('webpack').Configuration} */```


**by @jcsoftdev del curso de Webpack**

Ufff que configuracion noooo.

Más de la mitad de esta clase me sonó a Chino Mandarín 😅
Después de esto, es obligatorio el curso de Webpack, el de NPM, el de CSS Grid y el de Responsive Design.

le tuve que bajar la velocidad del video a 0.85 para irle agarrando los comandos XD

No se que paso

la-MacBook-Air-de-Uriel:cientifico urielol$ npm install @bable/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@bable%2fcore - Not found
npm ERR! 404 
npm ERR! 404  '@bable/core@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/urielol/.npm/_logs/2020-04-12T14_50_06_925Z-debug.log
la-MacBook-Air-de-Uriel:cientifico urielol$ ```

Alguien sabe como solucionar estos errores uso WSL

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.12
npm WARN cientifico@1.0.0 No repository field.
npm ERR! Linux 4.4.0-18362-Microsoft
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "@babel/core" "babel-loader" "html-webpack-plugin" "webpack" "webpack-cli" "webpack-dev-server" "--save-dev"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! path /home/roy/learning/cientifico/node_modules/glob-parent
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall rename

Webpack es un Module Bundler for modern JavaScript applications, es decir, un empaquetador de módulos para aplicaciones modernas hechas en JavaScript.

Más información, aquí: Tutorial de Webpack: Qué es y cómo usarlo en proyectos JavaScript

chicos le dejo documentación de la configuración de webpack
explica más a detalle cada linea
https://webpack.js.org/configuration/
igual estaría bien pegarle un vistazo al curso de webpack de platzi
https://platzi.com/clases/webpack/

Esto me recuerda a una configuración de PostCSS o Tailwind CSS

les recomiendo MUCHO este tutorial de youtube https://www.youtube.com/watch?v=vF2emKbaP4M

Chicos!, sin duda tengo que ver el curso de webpack, por que quede con cara de What? todo el tiempo xD

Hay algún curso que haga referencia a estos temas?

Todas la configuraciones de webpack están en su sitio oficial:
https://webpack.js.org/configuration/

ahí se explica todo

pm i @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

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',
      }
    ]),
  ]
}

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 tienen el siguiente error:

Module not found: Error: Can't resolve 'src/index.js

Lo solucionan así :

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

Configuración de la clase:

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',
                temnplate: './public/index.html',
                filename: './index.html'
            }
        ])
    ]
}

Hola a todos,

Solo una cosa más a agregar, me parece que aqui se olvidó el profe de instalar el plugin correspondiente al asincronismo, pues se va a trabajar con eso en este proyecto. A mi recién me funcionó una vez que instalé dicho plugin ( en la clase 6 del curso de webpack se puede ver como instalarlo y como agregar el archivo oculto “.babelrc” … atento con eso amigos!

Saludos

Creo que al proyecto le falto agregar el archivo .babelrc y adentro agregar:

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

Por si a alguien le sirve , yo suelo darle una checada a la documentación de lo que estoy aprendiendo les dejo una referencia a los conceptos de WebPack y babel para entender al 100 lo que estamos haciendo:
https://webpack.js.org/concepts/
https://babeljs.io/docs/en/presets/

npm i @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server -D

Me regrese a este video ya que posteriormente algunos tendrá problemas con las versiones instaladas que aparecen en este video por eso mismo dejo aquí un comentario de otro compañero el cual me ayudo a resolverlo.
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 webpack@4 webpack-cli@3

Recomiendo antes de continuar con este curso primero hacer el curso de “gestion de dependencias y paquetes con NPM” para entender mejor los comandos que escribe el profesor y no solo escribir y repetir por repetir lo que el profesor hace, mejor comprender bien los comandos.

5k el colmo de cambios

no entendi ni pio. esta bien… el curso de webpack esta mas adelante en esta ruta… asi que no me frustrare por entender hasta que llegue a ese curso

npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

Ayuda. Puse el mismo comando que Oscar y me salen estos errores. Ahi se muestra mi version de NPM y Node.

wow descubrí cositas nuevas, me duele el cerebro…

Cual es la extencion que usara para que se vean los dibujos de los archivos ?

sin darme cuenta instale las dependencias fuera de la aplicación abra algún problema con eso

Excelente clase!

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: {
        extentions: ['.js'],
    },
    module: {
        rules: [
            {
                test: /\.js?$/, 
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filname: './index.html'
            }
        ])
    ]
}

Tengo que tomar el curso de webpack!!

Como funciona la parte de resolve y extensions?

😮

Si tienes una lista de errores cuando empiezas a hacer la instalación en WSL para windows. Es muy probable que sea porque tienes abierto el visual Studio Code remoto. Intenta cerrarlo y volver a correr el comando. (Me pasó muchas veces)

es normal que en windows, cuando voy a poner npm install @babel me aparezca “c:\cientifico” en ves de “cientifico git:(master)”?

npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

> fsevents@1.2.12 install /Users/jsrj/Documents/developments/html/cientifico/node_modules/fsevents
> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/usr/local/Cellar/node/13.12.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/jsrj/Documents/developments/html/cientifico/node_modules/fsevents
gyp ERR! node -v v13.12.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN cientifico@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

+ html-webpack-plugin@4.2.0
+ babel-loader@8.1.0
+ webpack-cli@3.3.11
+ @babel/core@7.9.0
+ webpack@4.42.1
+ webpack-dev-server@3.10.3
added 685 packages from 404 contributors and audited 9317 packages in 81.713s

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

found 0 vulnerabilities

➜  cientifico git:(master) ✗ 

dejare esta pequeña documentación de objetos globales en node.js por si a alguno le es útil 😃

https://nodejs-es.github.io/api/globals.html

Puse el comando tal cual lo pone Oscar y me dio error. Luego intente con “sudo” y si bien tengo menos error sigue fallando la instalacion.
Dejo captura:

Hola a Tdos, tengo este error, estoy casi seguro que hice paso a paso, según lo indica el profe.

Pueden ayudarme a entender, ¿por qué sucedió este error?

<PS C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico> npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})      
npm WARN [email protected] No repository field.

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico\node_modules\@babel\helper-validator-identifier
npm ERR! dest C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico\node_modules\@babel\.helper-validator-identifier.DELETE
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico\node_modules\@babel\helper-validator-identifier' -> 'C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico\node_modules\@babel\.helper-validator-identifier.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\John\AppData\Roaming\npm-cache\_logs\2020-04-16T17_08_22_468Z-debug.log
PS C:\Users\John\Dropbox\Universidad\MOOCS\2.RETO\SPA\cientifico> >

Un poco confuso sin duda alguna.

En qué momento se creo el README.md? :0

Para los que se preguntan que son esos símbolos en test: /.js?$/, acá lo explican:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp

Clave teclado para la barra invertida
AltGr + ?

git init
npm init
npm install @babel/core babel-loader  html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

Dependencias para desarrollo

Que procede si no entendi nada? 😃

Cuando analizas punto por punto ves que es mucha información en 10 minutos. Cuántos años para aprenderte estos 10 mitos Oscar Barajas?
(solo es reflexión, no estoy preguntando estrictamente)

Me toco ir a hacer el curso de webpack

Yo lo hice desde windows 10 y me daba muchos errores, hasta que lo instalé desde la terminal de visual studio code y ya se instaló bien

🤯🤯🤯🤯🤯🤯🤯🤯

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'
            }
        ])
    ]
}

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'
            }
        ])
    ]
}

que bueno el no continuar la mala práctica de hacer demos sin este tipo de herramientas de npm, me alegra ver un curso así

Hola, tengo una duda bastante básica pero que no he logrado entender, es sobre las diferencias entre desarrollo y producción. A que se refiere cuando habla de mandar a producción? En los cursos que he visto lo mencionan pero no lo explican. Gracias!

¿Para que usamos Babel?
Babel es la herramienta que nos sirve para pasar codigo moderno de JavaScript a un JavaScript que el navegador “entienda” por asi decirlo.

,Me arrojó error:

C:\Users\patricio\cientifico>npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\patricio\AppData\Roaming\npm-cache_logs\2021-02-07T01_30_06_811Z-debug.log

Dale 💚 para que pongan en la ruta de desarrollo web primero el curso de webpack y luego este

Buen día !!

comparto la configuración que arme lista para funcionar con webpack 5 y typescript:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '..', 'public'),
    publicPath: '/',
  },
  devServer: {
    open: true,
    historyApiFallback: true,
    stats: 'errors-only',
  },
  optimization: {
    nodeEnv: 'development',
    emitOnErrors: true,
    minimize: false,
    removeAvailableModules: false,
    concatenateModules: true,
    checkWasmTypes: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: './index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: [/node_modules/, /public/, /__mocks__/, /tests/],
      },

      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },

      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

y en package.json pueden agregar el comando:
(contemplando el issue que se reporto con webpack-dev-server)

"dev": "webpack serve --config webpack.config.js",

Comparto la URL donde hay un archivo de configuracion de webpack, Configuracion webpack. Tambien se puede generar este archivo con la extension de webpack para vscode.

f

siento que se explica todo muy rapido

A nadie le dio npm error?

Hola cómo están, si son novatos como yo, y no tienen muchos conocimientos previos, frente a webpack y su funcionalidad, les dejo un link que me brindó información importante https://www.campusmvp.es/recursos/post/webpack-que-es-para-que-sirve-y-sus-ventajas-e-inconvenientes.aspx

cuando instale las dependencias no me salia que se estaban instalando , espere un momento y de repente salio el resultado de la instalacion completada! por asi alguien le pasa lo mismo…!