Crea una cuenta o inicia sesi贸n

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

Preparar Webpack

4/16
Recursos

Aportes 94

Preguntas 21

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

鈥搒ave-dev : Permite instalar un conjunto de dependencia en la modalidad de desarrollo para el archivo packet jsom

Bueno quede as铆鈥

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

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]

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.

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

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 馃槂

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 ->鈥渕enos鈥).

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

Otra opci贸n para los que se les complica 鈥渨ebpack鈥 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/

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

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

}


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/[email protected]' 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: [email protected]1.2.12
npm WARN [email protected]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

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 [email protected] [email protected]

Recomiendo antes de continuar con este curso primero hacer el curso de 鈥済estion 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!!

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

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 鈥渃:\cientifico鈥 en ves de 鈥渃ientifico git:(master)鈥?

npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
npm WARN deprecated [email protected]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

> [email protected]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 [email protected]1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.12 (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.12 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

+ html-webpack-plugin@4.2.0
+ [email protected]8.1.0
+ [email protected]3.3.11
+ @babel/[email protected]7.9.0
+ [email protected]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 鈥渟udo鈥 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: [email protected]^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 鈥渆ntienda鈥 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.

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

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鈥!