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 “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

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 “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

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 ‘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.

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 “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.

👌

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 “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.

  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, 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