Tu primer build con Webpack

Tu primer build con Webpack
Creamos una carpeta como le quieras llamar
(Bueno no! si eres de Windows te dejo este articulo cortito de los nombres de carpetas PROHIBIDOS )
La creamos desde la terminal con mkdir y luego entramos a ella con cd

mkdir curso-webpack
cd curso-webpack

una vez que entres a la carpeta inicializamos nuestro repositorio con git

git init

El paso que sigue es inicializar nuestro proyecto con npm y si no sabes de npm aqui esta el curso del profesor

npm init -y

o si les da error “Invalid Name” usen para personalizar la configuración

npm init

y para abrir el proyecto como flash es poner en la terminal y les abre el editor ( si usas VS CODE)

code .

La carpeta SRC es el source de todo el proyecto ( index.js , imágenes, utils, assets, helpers, database, etc).

** Instalación de Webpack**
si no quieres escribir ese comando también puedes usar este
la i de install

npm i webpack webpack-cli -D

o si usas yarn usa

yarn add webpack webpack-cli -D

Y luego ejecutamos webpack
npx lo que hace es ejecutar paquetes directamente de npm, este viene instalado de npm

npx webpack

Al hacer esto webpack creo una carpeta llamada dist, esto lo hace por defecto webpack sin preguntarnos.
Modo de desarrollo
Por defecto webpack al compilar nuestro proyecto setea el modo “production” implícitamente pero podemos definirle el modo explícitamente corriendo:

npx webpack --mode production
npx webpack --mode development

La diferencia radica que el modo development deja el código mas legible para los desarrolladores pero con comentarios, el modo production deja el código comprimido y mas limpio para usarse.

¿Alguien más escuchó al bebeloper en el minuto 3:34? 👶🏻

No me quedo muy claro que es lo que hace npx.
Estos recursos me ayudaron a entenderlo mejor:
https://www.npmjs.com/package/npx
https://xavitristancho.pro/blog/que-es-npx
https://www.freecodecamp.org/espanol/news/npm-vs-npx-cual-es-la-diferencia/

comandos importantes de npm y webpack

Seguramente a muchos les intereso la forma en que la terminal del profe autocompleta comandos, les dejo los repo a los plugins de zsh, uno resalta la sintaxis y otro autocompleta, también dejo un video de youtube por si no saben como instalarlo.
https://github.com/zsh-users/zsh-autosuggestions
https://github.com/zsh-users/zsh-syntax-highlighting
https://www.youtube.com/watch?v=BsIvzROWZ30&ab_channel=CristianRojas

Tu primer build con Webpack

Comando para instalar webpack en DevDependecies

npm install webpack webpack-cli -D

Al ejecutar el siguiente comando, Webpack crea la caepeta dist, esto lo hace por defecto si no configuramos webpack.

npx webpack

Para que al ejecutar el anterior comando, no nos de un warning debemos colocar el modo en que va a trabajar webpack.

npx webpack --mode production
npx webpack --mode development

Notes

• Al trabajar en un proyecto se debe tener una estructura de archivos para identificar donde va cada cosa.

  • Se suele usar la carpeta src/ para colocar todo el código que irá a producción, fuera de esta pueden haber archivos pero no serán mas que configuraciones y no el proyecto en si.
  • El archivo de entrada será el index.js y si se trabajará con componentes o pages, se deben incluir en una carpeta dentro de src/ e incluirlos ahí.
  • npx: lo que hace es ejecutar paquetes directamente de npm, este viene instalado de npm

  npx webpack
  
  npx webpack --mode production
  npx webpack --mode development
  

  • npx webpack: Lo que hará es ejecutar el paquete de webpack, este mapeará los paquetes de nuestros proyecto, los leerá y optimizará para empaquetarlo en un único archivo JS, por defecto los empaqueta en modo producción.
  • npx webpack --mode production: Acá el output (bundle.js) Es mas comprimido y mas limpio para usarse.
  • npx webpack --mode development: El archivo será mas detallado con comentarios para los desarrolladores y poder mejorar y debuggear el proyecto.

  ---

Tus posibles dudas resueltas:

1. ¿Qué es webpack-cli?

CLI se refiere a Conmmand line interface y básicamente es instalar los comandos de webpack en la terminal para que puedas ejecutarlos.
En cuanto a “-D”, es la abreviación de “–save-dev”, lo cual indica que esta es una dependencia que se utilizará solo para el desarrollo del proyecto y que no afecta para el funcionamiento para cuando se hace el despliegue a producción.

¿Por qué “npx webpack” y no “npm webpack”?

NPM se refiere a “node package manager” y sirve para instalar paquetes como tal. Cuando instalas un paquete, posteriormente necesitarás indicar dónde se encuentra el paquete para ser ejecutado. Esto se hace mediante dos maneras (elegir la que se te haga más fácil):

1. Indicando en la terminal donde se encuentra el paquete:
   `./node_modules/.bin/your-package-name``
2. poniendo un script en tu “package.json”:

{
    "name": "Your app",
    "version":  "1.0.0",
    "scripts":  {
            "your-package":  "your-package-name"
     }
}

y después ejecutandolo en la terminal mediante: `npm run your-package-name``

NPX viene de “node package execute” y en esencia sirve para ejecutar paquetes sin necesidad de instalarlos previamente. NPX checa si es que ya tenías instalado el paquete y si no, lo descarga e instala para hacer una ejecución de una sola vez.

De hecho, es posible hacer lo que el profe hizo de “npx webpack” usando npm (porque ya instalamos webpack).
En tus scripts añade:

1. webpack: "webpack". No olvides poner una coma en la línea anterior, que es donde aparece el script “test”.
2. Ejecuta en tu terminal: npm run webpack

Aquí una captura de que yo lo intenté y el resultado es el mismo:

Esta aclaración solo es para que sepas de dónde viene cada cosa. Recomiendo seguir y hacer las cosas como indica el profesor para evitar inconvenientes futuros.

Desde webpack 4 no requiere un archivo de configuración, por lo que, después de instalar webpack en tu proyecto puedes correr

npx webpack

y webpack creará la carpeta_ /dist _donde encontrarás el archivo main.js con tu código javascript optimizado según el modo:

// development
npx webpack --mode development

// production
npx webpack --mode production

que terminal esta usando???

Prepare the project

1. Initialize Git .

   git init
   

2. Initialize npm project.

   npm init -y
   

Instalation of Webpack

npm i webpack webpack-cli -D

Allows to Webpack identify the boot project elements

npx webpack

Visualization of the Webpack setting at the project

Webpack makes a project structure with the follow elements:

• Folder “dist”.
  • File: “main.js” (Is the finished code. Webpack optimize and prepare the code to be better)
• Folder “node_modules”
  • Too much elements and files. xd
• Folder “src”
  • File: “index.js”

Compile in Development mode

npx webpack --mode development

shows instructions and elements to debug the code. This mode active the view to see more options.

Compile in Production mode

npx webpack --mode production

Just shows console.log("hello"); , Webpack optimize the code to clarify the execution and delete the things that aren’t necessary.

$ npm install webpack webpack-cli -D
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/webpack (over 30000ms)

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

Si sale un error como este, se soluciona con:
npm cache clean --force

generador de proyectos hace que webpack sea menos tedioso en temas de configuracion, te genera practicamente todo, saludos

Alternativa para crear una carpeta e inmediatamente entrar en ella (en este caso curso-webpack):

take curso-webpack

que genial que este usando ubuntu en esta clase, espero que asi sea durante todo el curso

Cual es la diferencia entre el modo produccion y el modo de desarrollo ?

Hola, una pregunta, cual es la diferencia entre el modo produccion y el modo de desarrollo ?

AYUDAAA 😦

$ npx webpack --mode development
npx: installed 76 in 30.323s
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use “npm” to install the CLI via “npm install -D webpack-cli”.
Do you want to install ‘webpack-cli’ (yes/no):
le doy yes y se queda trabado ._.

con npm instalas los paquetes y npx para ejecutar esos packetes

Si estas en Mac y no te funciona el comando “code” en el terminal:

1. Abre el Visual Studio Code
2. Pulsa control + shift+ p
3. Escribe shell
4. Selecciona la opción “Shell Command : Install code in PATH”

Y te funcionará de ahora en adelante.

Por si alguien quiere que su consola tenga autocompletado pueden instalar fish.

En mi caso debi cambiar el export a

module.exports = sum;

y el import a

sum = require('./utils/sum.js');

para que funcione.

Lo primero que tenemos que hacer en nuestra terminal es empezar la configuracion de un nuevo proyecto. Necesitamos una carpeta especial para esto y no hacerlo donde sea, necesitamos dedicar una carpeta para esto y como ya sabemos esto se hace:

mkdir cursowebpack && cd cursowebpack

Ya que las tenemos necesitamos iniciar nuestro proyecto con GIT. como ya sabemos que es:

git init

y despues iniciarlo con NPM que si lo queremos hacer rapido es

npm init -y

Y ahora abriremos el proyecto con VSCODE. Usualmente podemos hacerlo en la terminal desde la carpeta del proyecto con

code .

Ya que estamos aqui necesitamos tener una estructura para saber donde esta cada cosa. Es bueno tener una carpeta tipo src que es el source donde vivira nuestro codigo, asi podemos tener otros archivos fuera de esta carpeta que no son tan necesarios en el programa porque no es codigo, son configuraciones o otros archivos.

Dentro de SRC crearemos un ‘index.js’ este archivo tendra la logica, sera el punto de entrada y el punto principal del codigo.

Otro punto intersante es trabajar la estrucutura de los elementos que vamos a tener. Si vamos a tener componentes, paginas, utilerias o archivos es mejor tener carpetas y dentro de ellas los archivos.

Ahora tenemos que instalar webpack en nuestra terminal tenemos hacer:

npm install webpack webpack-cli -D

Donde webpack-cli nos ayudara a trabajar desde la terminal y el -D es para indicar que es una dependencia de desarrollo.

Ahora tendremos que usar el siguiente comando para poder ejecutar webpack con:

npx webpack

Esto leera nuestro proyecto e identificara todos los archivos JS y nos va a preparar nuestro proyecto. El resultado es un proyecto ya compilado y preparado. Se creo una carpeta de DIST y se creo un archivo de main.js pero tiene el codigo resultante. Entonces podemos ver que webpack optimiza de forma sencilla las aplicaciones que tengamos.

Podemos usar el modo desarrollo usando

npx webpack --mode development

Con esta opcion tenemos una configuracion por defedcto que webpack prepara. Ahora nuestro a rchivo main tiene mas instrucciones y mas codigo que sirve para depurar.

Para ejectuar el modo production usamos:

npx webpack --mode production

Donde podremos ver que solo estara nuestra logica. Estas son las principales particularidades de nuestro proyecto.

esto podria ayudar: https://betterprogramming.pub/struggling-with-webpack-understand-it-through-illustrations-c8009e6ad4d5

Genial!!

Aqui un aporte muy importante, ya que Oscar pronuncia CRC y no SRC; la verdad que son dos cursos que vi y hace la misma pronunciacion

Linda tipografía la de la consola del profe

primera vez con webpack y es interesante como optimiza el codigo que genial

En tal caso que esten trabajando su proyecto desde su Disco D: y su terminal se haya instalado desde Disco C:, lo que deben hacer es ocupar la utilidad sudo , para cada linea de código escrita, es decir:

sudo git init
sudo npm init -y
sudo npm i webpack webpack-cli -D
sudo npx webpack
sudo npx webpack --mode production
sudo npx webpack --mode development

Recuerden que sudo permite ejecutar programas con los privilegios de seguridad, este mismo necesitará la contraseña que ingresaron como administradores.

Para crear un proyecto con Webpack primero debe ser inicializado con NPM.

Después hay que instalar Webpack desde la terminal y además instalar Webpack CLI para poder realizar las configuraciones desde la terminal.

Cuando se crea el bundle de Webpack también se optimiza el código JS de la aplicación para que sea lo más eficiente posible, manteniendo su funcionamiento.

Para crear este bundle se utiliza el comando npx webpack, por default estará en modo de producción pero para cambiar el modo se puede utilizar el comando npx webpack --mode production/development.

El modo de desarrollo activa diferentes particularidades en el código generado por Webpack para que sea más fácil hacer debugging y entender cómo está trabajando Webpack.

Bastante interesante y sencillo

En caso de que les aparezca el error :
npm code ENOSELF, deben entrar al package.json y asegurarse que en la propiedad name no tenga el nombre de webpack

Wow, qué bien explicado, se entiende perfectamente la diferencia entre desarrollo y producción.

-D = dependencia de desarrollo

Si no usamos -g no estamos instalando algo de manera global, solamente en el proyecto.

La carpeta “dist” es de “distribution”

npx weback --mode development configura el proyecto en modo desarrollo.
npx weback --mode production configura el proyecto en modo de producción. Esto optimiza el código.

Buena clase!

Genial…
Podrían compartir la configuración de visual studio.
Sería de gran ayuda. Para mejor mi entorno de trabajo

Lo que en realidad hace el profe en el min 4:00 es inicializar y no igualar.

👌

Si les da el siguiente error al ejecutar “npx webpack”:

[webpack-cli] TypeError: ["webpack.config",".webpack/webpack.config",".webpack/webpackfile"].flatMap is not a function

Ocupan instalar una versión mas reciente de node.js y limpiar caché, sigan estos pasos:

1. Descarga e instala la ultima versión desde https://nodejs.org/es

2. Limpia caché de Nose.js con:

npm cache clean -f

1. Elimina la carpeta node_modules: En tu proyecto, elimina la carpeta node_modules y el archivo package-lock.json (o yarn.lock si estás utilizando Yarn) para asegurarte de que no haya dependencias antiguas o conflictivas

2. Vuelve a ejecutar “npm install webpack webpack-cli -D”

3. Vuelve a ejecutar “npx webpack”

A este paso ya debería darte el warning que mencionan en el video.

1. Creamos una carpeta donde ejecutarimos git y npm

<aside>
💡 mkdir curso-webpack
cd curso-webpack

</aside>

<aside>
💡 git init

npm init -y

</aside>

1. Dentro de la capeta creamos otra carpeta donde va a vivir el código principal js

1. Ahora vamos a instalar webpack desde la terminal y webpack-cli que nos permite trabajr con comandos dentro de la terminal (esta instalación solo esta global si no en el proyecto)

<aside>
💡 npm install webpack webpack-cli -D

</aside>

1. Ahora vamos a ejecutar npx webpack para que se ejecute como un comando esto prepara el proyecto

<aside>
💡 npx webpack

</aside>

1. al revisar el proyecto podemos ver que se creo una carpeta dist de distribución y dentro de ella se creo una carpeta main.js y este archivo se encuentra el código de index pero mas optimizado

1. activar modo desarrollo esto lo hacemos con e este comando

<aside>
💡 npx webpack —mode development

</aside>

esto activara un codigo que se encontrara en main.js

1. Comando, pasar código a producción esto se realiza con el comando

<aside>
💡 npx webpack —mode production

</aside>

esto solo pone el code como estaba antes

Para utilizar la linea de comandos en vscode es útil hacer lo siguiente:

https://superuser.com/questions/1270103/how-to-switch-the-cursor-between-terminal-and-code-in-vscode

Go to: File > Preferences > keyboard shortcuts
Then in the search-bar, search for focus terminal
Select workbench.action.terminal.focus and then CTRL+k or press your custom key and then press enter.
Similarly, in the search-bar search for focus active editor group
Select workbench.action.focusActiveEditorGroup and then press CTRL+j or press your custom key and then press enter.

PD: por amor de dios utilizar vscode para los cursos pero utilizar una verdadera herramienta de desarrollo como vim para trabajar de verdad. vscode ya me canso.

Para editar al inicio el package.json. solo tienes que escribir este comando

npm init

Comandos destacados:
//usamos npm para instalar la herramienta webpack y el componente webpack de linea de comandos, pasamos la bandera -D para que se establescan como dependencias de desarrollo

• npm install webpack webpack-cli -D
  //Ejecutamos una primera vez son parametros para comprobar su funcionamiento con:
• npx webpack
  //Establecemos ya sea el modo de producción o de desarrollo para generar una salida optimizada para el ambiente en una nueva carpeta “dis” - de distribución
• npx webpack --mode production
• npx webpack --mode development

exelente explicacion

Pasos & comandos para crear proyecto

En la terminal
1- mkdir <nombre_carpeta> = Crear carpeta del proyecto
2- init npm = Inicializar package.json (-y agrega valores por defecto).
3- git init = Inicializar repositorio versionamiento local
4- code . = Abri proyecto en vscode
En vscode
5- Crear carpeta para los fuentes scr/
6- Crear archivo index.js dentro de scr/
7- Agregar código requerido
En terminal denuevo
8- npm install webpack webpack-cli -D = Instalar webpack,cli, -D para que sean dependencia de desarrollo
9- npx webpack = para ejecutar webpack

• Crea una carpeta dist/ con un main.js con código optimizado
  npx webpack --mode development (Activa el modo desarrollo para depuración)
  npx webpack --mode production (Prepara el proyecto para publicar en producción, optimizado)

Sigue…

Ya me siento hacker

si tienes problemas al instalar y posteriormente ejecutar

npm i webpack webpack-cli -D
npx webpack

USA SUDO

sudo npm i webpack webpack-cli -D
sudo npx webpack

Para comenzar creamos un repositorio con:

git init

Luego inicializamos node con:

npm init

Después instalamos webpack y las herramientas de la terminal de webpack en nuestro proyecto, como una dependencia de desarrollo, con:

npm install webpack webpack-cli -D

Finalmente instalamos webpack de forma global con:

npx webpack

//Adicionalmente podemos usar --mode production y --mode development para alternar entre compilación de producción y de desarrollo respectivamente

Muy buena clase 😃

1. npm install webpack webpack-cli -D → instala wepack
2. npx wepack —mode development
3. npx wepack —mode production

Entiendo más el código que genera webpack en producción que en desarrollo🤔

3.-Tu primer build con Webpack

Empezamos haciendo una carpeta, inicializarlo con npm, inicializarlo en git.

npm init -y : hace un por defecto de la configuración.

npm init : vamos haciendo la configuración.

En src va a ir el código, de esta manera podemos tener otros archivos que pueden estar fuera de esta carpeta que no son tan necesarios del proyecto, como configuraciones u otros elementos.

Para instalar webpack y poder trabajar con el usamos:

npm install webpack webpack-cli -D

webpack-cli -D //nos permite trabajar con comandos dentro de nuestra terminal
//el -D para guardarlo como dependencia de desarrollo.

Para instalarlo de manera global usamos : npx webpack, lee el proyecto e identifica el archivo index o todos los archivos JS y nos prepara el proyecto.

En dist podemos ver el archivo main.js que tiene el código resultante y en el ejemplo podemos ver como optimiza el código para ser mejor ya que estábamos siendo redundantes.

npx webpack --mode development //Para activar el modo desarrollo  

Ahora podemos ver como en el archivo main.js ahora tiene instucciones, elementos y particularidades claves para debuggear y entender que está pasando. El modo activa esta vista.

npx webpack --mode production //Modo produccion

Podemos ver como vuelve el console.log simplificado que habíamos visto antes

Webpack optimiza nuestro código cuando pasamos de modo desarrollo a modo producción.

el profesor instala los paquetes en segundos jajaja, yo hace horas llevo esperando la instalacion

desde linux usar la terminal es pan de cada dia

npx webpack
npx webpack --mode production

son similares, esta es la configuración por defecto que tiene webpack

Ahora entiendo que es Webpack y importancia. Cuando haces las cosas, las entiendes mejor que con la teoría y tecnicismos.

Una pregunta, cual es la diferencia entre el modo produccion y el modo de desarrollo ?

Hola a todos, una pregunta, cual es la diferencia entre el modo produccion y el modo de desarrollo ?

como logran hacer que en la consola salga el auto completado?

Para abrir VSC desde la terminal solo debemos:

1. Abrir VSC
2. Abrir la paleta de comandos (CMD + shift + P) y escribir shell command para buscar ** Shell Command** : Install ‘code’ command in PATH command
3. Reiniciar la terminal

MY NOTES YOUR FIRST BUILD WITH WEBPACK

• Creamos nuestra carpeta donde tendremos todo el código y luego hacemos git init

git init

• Luego instalaremos npm que nos servirá para manejar la distribución de nuestro archivo y cosas que vayamos a configurar en el proyecto, usamos la bandera y para que nos cree todo de una

npm init -y 

• creamos carpeta source que es donde ira todo nuestro codigo de javascript en la raiz si ira cosas que se descarguen despues, creamos un index.js.
• Luego instalamos webpack en nuestro proyecto -d para indicar que se ejecutara en desarrollo. cuando utilizamos este comando solo lo instalamos dentro de nuestro proyecto y no de manera global

npm install webpack webpack-cli -D

• Para instalarlo de manera global utilizamos el siguiente comando, al dar enter va a leer nuestro proyecto y va a identificar el archivo index o todos los archivos js y nos va preparar nuestro proyecto.

npx webpack

• Al ver nuestro código veremos como lo preparar webpack para trabajar con el y vemos que creo unas carpetas nuevas. Se crean carpetas dist y node modules, en dist podremos ver como ahi se compila lo que esta en nuestro index.js
• Webpack nos ayudara a optimizar nuestro codigo para ser mejor.
• Para poder ejecutar nuestro proyecto en produccion hacemos el siguiente comando

npx webpack --mode development

• Este modo activa una vista diferente en la que podremos observar cosas que no se ven cuando estamos en desarrollo y nos permite debuggear errores y hacer mas fácil nuestro desarrollo en una aplicacion.
• Si hacemos este mismo comando y le ponemos la bandera production

npx webpack --mode development

podremos regresar al modo normal donde estabamos inicialmente

• Creamos una nueva carpeta llamada utilts y pondremos archivos ahi e este caso una funcion que hace una suma
• La exportamos y la importamos en nuestro archivo index.js para poder uso de ella ahi

sum.js

const sum = (num1, num2) =>{

  return num1 + num2

} 

// la exportamos para poderla utilizar en otro archivo
export default sum

index.js

import sum from './utils/sum.js';

console.log(sum(2,2));

• Vamos a development para poder compilar nuestro proyecto y ver lo que hay el como webpack configura cada cosa para poder utilizar nuestro código
• pasamos de nuevo a production y podremos ver en dist como todo nuestro codigo se compilla para que sea mas optimizado

la verdad estoy un poco perdido con todo lo relacionado a npm :c