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? 👶🏻

comandos importantes de npm y webpack

que terminal esta usando???

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

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

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

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

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/

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.

👌

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.

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

Una pregunta, 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 ?

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

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.

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

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.

Bastante interesante y sencillo

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.

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

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

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