Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Tu primer build con Webpack

3/28
Recursos

Aportes 54

Preguntas 24

Ordenar por:

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

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 鈥淚nvalid 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 鈥減roduction鈥 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

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.

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 鈥渄ist鈥.
    • File: 鈥渕ain.js鈥 (Is the finished code. Webpack optimize and prepare the code to be better)
  • Folder 鈥渘ode_modules鈥
    • Too much elements and files. xd
  • Folder 鈥渟rc鈥
    • File: 鈥渋ndex.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鈥檛 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

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 ?

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 鈥榠ndex.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.

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

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.

<h3>Proyecto inicial</h3> <h4>Tu primer build con Webpack</h4>

-D = dependencia de desarrollo

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

La carpeta 鈥渄ist鈥 es de 鈥渄istribution鈥

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.

馃憣

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鈥

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

take curso-webpack

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

con npm instalas los paquetes y npx para ejecutar esos packetes

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

Si estas en Mac y no te funciona el comando 鈥渃ode鈥 en el terminal:

  1. Abre el Visual Studio Code
  2. Pulsa control + shift+ p
  3. Escribe shell
  4. Selecciona la opci贸n 鈥淪hell Command : Install code in PATH鈥

Y te funcionar谩 de ahora en adelante.

  1. npm install webpack webpack-cli -D 鈫 instala wepack
  2. npx wepack 鈥攎ode development
  3. npx wepack 鈥攎ode 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, 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 鈥榗ode鈥 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