Introducción a Webpack

1

Curso Avanzado de Webpack para Producción Web

2

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

3

Configuración y Uso de Webpack en Proyectos JavaScript

4

Optimización de Proyectos Web con Webpack para Producción

5

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

6

Integración de Babel y Webpack para compatibilidad JavaScript

7

Configuración de HTML-webpack-plugin en Webpack

8

Configuración de Webpack para CSS y Preprocesadores

9

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

10

Importación de Imágenes con Webpack Asset Module

11

Optimización de Fuentes Locales con Webpack

12

Optimización de Proyectos con Webpack: Minificación y Hashing

13

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

14

Variables de Entorno en Webpack para Proyectos Seguros

15

Configuración de Webpack para Modo Desarrollo

16

Configuración de Webpack para Producción y Limpieza de Builds

17

Activar Watch Mode en Webpack para Desarrollo y Producción

18

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

19

Configuración de Webpack Dev Server para Desarrollo Local

20

Análisis de Dependencias con WebPath Bundle Analyzer

21

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

22

Configuración de Webpack y React desde Cero para Producción

23

Configuración de Webpack en Proyecto React con Babel y JSX

24

Configuración de Webpack para Proyectos HTML y Servidor Local

25

Configurar CSS y SaaS en React con Webpack

26

Configuración de Webpack para Producción en React

27

Despliegue de Aplicaciones React en Netlify

Próximos pasos

28

Configuración y Uso de Webpack con React

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Activar Watch Mode en Webpack para Desarrollo y Producción

17/28
Recursos

¿Cómo activar el modo watch para detectar cambios en el proyecto?

El modo watch es una herramienta invaluable para desarrolladores que buscan eficiencia. A través de esta función, podemos observar y compilar automáticamente nuestro proyecto cada vez que realizamos un cambio, sin tener que hacerlo manualmente. Aquí te explicamos cómo configurarlo.

Primero, debemos editar nuestra configuración de modo desarrollo, sin alterar la de producción. Para ello, añade la opción watch y ponla en true. Esto activará la escucha de cambios para nuestro proyecto directamente.

{
  // Parte de tu configuración
  "watch": true
}

Con esta línea, al ejecutar npm run dev en la consola, el proyecto quedará a la espera de cambios. Al modificar un archivo, como agregando un console.log('Hola') en el index, Webpack se encargará de detectar automáticamente el cambio y recompilará el proyecto.

¿Cómo configurar el watch en el archivo package.json?

Otra estrategia para activar el modo watch es mediante una opción directa en el archivo package.json. Aquí tenemos la flexibilidad de crear scripts personalizados para diferentes necesidades.

Dentro de package.json, añade un script para el modo desarrollo y producción. Aquí te mostramos cómo configurar un script de build con la opción de watch:

"scripts": {
  // Otros scripts
  "build:watch": "webpack --mode development --watch",
  "build:watch:prod": "webpack --mode production --watch --config webpack.config.js"
}

Esta configuración te proporcionará comandos específicos para ejecutar la opción en ambos modos. Solo ejecuta npm run build:watch o npm run build:watch:prod según sea necesario.

¿Cuándo usar el modo desarrollo y el modo producción?

Una de las decisiones cruciales al trabajar con proyectos web es saber cuándo usar el modo desarrollo y cuándo el modo producción. Si bien el modo desarrollo es rápido y eficiente para detectar cambios, el modo producción está optimizado para la entrega final del producto.

  • Modo desarrollo: Ideal para trabajar localmente y ver rápidamente los cambios reflejados en la aplicación. Es más eficiente al hacer pruebas rápidas.

  • Modo producción: Enfocado en optimización. Aunque toma más tiempo en compilar, el resultado es un producto apto para ser distribuido o desplegado. Especialmente útil antes de finalizar el proyecto para asegurar que todo funcione a la perfección en un entorno similar al que se desplegará.

Siempre asegúrate de que la configuración del modo activo sea la adecuada para tus necesidades específicas. Un proyecto más pequeño puede cambiar fácilmente entre ambos modos, pero proyectos de mayor envergadura requieren una planificación más detallada.

Ahora que comprendes estas particularidades, estás listo para llevar tus proyectos al siguiente nivel y mandarlos a un recurso en la nube para que sean accesibles para tus amigos, conocidos o clientes. Recuerda, un buen desarrollador siempre está atento a los detalles y planifica según sus necesidades. ¡Sigue aprendiendo y mejorando tus habilidades!

Aportes 29

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La forma más común en la que el watch se suele usar dentro de un archivo package.json es esta:

"dev": "webpack --config webpack.config.dev.js",
"watch": "npm run dev --watch"

Simplemente se ejecuta el script dev, pero con el flag watch 👀

👀 Webpack Watch

<h4>Apuntes</h4>
  • El modo watch hace que nuestro proyecto se compile de forma automática
    • Es decir que está atento a cambios
  • Para habilitarlo debemos agregar lo siguiente en la configuración de webpack
module.exports = {
	...
	watch: true
}
  • Cada vez que haya un cambio hara un build automático
  • Otra manera es mandar la opción mediante parámetros de consola en package.json
{
	"scripts": {
		"dev:watch": "webpack --config webpack.config.dev.js --watch"
	}
}
  • Vale la pena recordar que si aplicamos en modo producción se tomara más tiempo porque se optimizaran los recursos
    • Por ello en modo desarrollo se salta ese paso y es más rápido la compilación

Nota: Recuerden que para matar la consola es control + c

Este es un plugin bonito 😄
https://webpack.js.org/plugins/progress-plugin/
https://www.npmjs.com/package/progress-webpack-plugin

Te da un porcentaje de carga mientras el webpack compila

se supone que utilizar el --watch consume memoria del disco y por ello existe el plugin de webpack-plugin-server, que hace lo mismo pero lo que consume es la memoria ram(haciendo que el proceso sea mas optimo y eficaz). no?

Watch de Webpack

Habilitando esta opción lograremos que webpack levante un nuevo build cada vez que un archivo sufra un cambio, de manera automática. El modo watch lo podemos habilitar a través de la configuración de Webpack o por nuestro archivo package.json:

module.exports = {
  ...
  watch: true,
};

o en nuestro JSON de la siguiente forma:

"scripts": {
    ...
    "build:watch": "webpack --watch --config webpack.config.js"
  }

Configuración de Watch

Watch tiene una serie de configuraciones que nos ayudarán a mejorar su comportamiento si es necesario. Entre ellos tenemos:

  • watchOptions.aggregateTimeout: number = Añade un retraso antes de realizar el levantamiento del proyecto una vez se haya detectado el cambio, esto habilita a Webpack de añadir cualquier otro cambio realizado durante este periodo de tiempo, el tiempo se indica en ms.
  • watchOptions.ignored: string = En algunos sistemas, utilizar watch en muchos archivos puede provocar retrasos por el fuerte uso de CPU y memoria, así que es posible ignorar carpetas como node_modules
  • watchOptions.poll: boolean || number = Busca cambios realizados X cantidad de tiempo, el tiempo se indica en ms.
module.exports = {
  ...
  watchOptions: {
    aggregateTimeout: 200,
    ignored: /node_modules/,
    poll: 1000,
  },
};

Fuente: Documentación Webpack

En conclusión, watch es como el Live Server de VSC

el webpak Watch me recuerda a al nodemon de node.js XD

El modo watch de Webpack consiste en que está constantemente revisando si hay cambias en el proyecto y si detecta alguno, automáticamente hace un nuevo build.

Para trabajar con este modo hay que activarlo en el archivo de configuración agregando la propiedad watch con el valor true, con esto Webpack ya está en modo watch. Esta funcionalidad solo tiene sentido en un entorno de desarrollo.

Otra forma de activar este modo es mediante el comando de ejecución de webpack, agregando --watch.

Una forma más fácil de trabajar con nuestro proyecto en modo desarrollo es con webpack-dev-server que nos brinda comandos integrados con Webpack y configuraciones para su ejecución

Al parecer el modo production no se puede ocupar con la opción watch es por eso que a Óscar jamás le ejecuta otra compilación al ejecutar el npm run build:watch

<h4>Webpack Watch</h4>

Con la bandera --watch podemos hacer que webpack esté escuchando nuestros cambios y compile el proyecto cada vez que guardamos 1 archivo.

👌

Sin tener que activar en el archivo de configuraciones de webpack y solo creando estos scripts. ¿Es lo mismo, no?

17.-Webpack Watch

.
Para escuchar los cambios de nuestro proyecto y se compile de forma automática nuestro proyecto.

  • En la config de modo desarrollo lo activamos de la siguiente manera
watch: "true",
  • Lo ejecutamos con npm run dev y vemos que ya no regresa el output, sino que se queda procesando a un cambio, de esta manera se queda espeando cambios y no tenemos que correr el comando a cada rato.
  • Otra manera de activarlo para una configuración específica o una forma de preparar el proyecto es ir a package.json y creamos la opción.
  • Es importante que si trabajamos en local, todo lo que ejecutemos pase por el archivo de dev.

2 FORMAS DE ACTIVAR EL WATCH:

1.- DESDE Webpack.config.dev.js o Webpack.config.js .

  • En el archivo webpack.config.js debajo de “mode”:
}
   ....
    mode: 'development',
    watch: true,
}

y corremos:

npm run dev /* ó */ npm run build

2.- DESDE package.json:

// YA SEA BUILD O DEV, SOLO SE AÑADE --watch + --config + el archivo .dev
    "build": "webpack --mode production --watch --config webpack.config.js",
// Ó
    "dev": "webpack --watch --config webpack.config.dev.js",

y corremos:

npm run dev /* ó */ npm run build

Vamos a activar el modo watch, esto observará los cambios de nuestros proyecto y hará que se compile de manera automática.

Aquí ya tenemos habilitada la opción para ver los cambios al tiempo.

*webpack.config.dev.js*
watch: true,

Debajo estamos colocando de manera explícita que queremos ver los cambios al tiempo. Específicamente en modo producción.

*package.json*
"build:watch": "webpack --watch --config webpack.config.js"

El modo watch es para estar escuchando los cambios del proyecto y esto se compile de forma automatica.

Para hacer esto hay que ir a la configuracion del modo desarrollo y hay que activarlo en el modo donde escribimos que usaremos el modo development, abajo agregaremos:

watch:true

y ya en la consola solo ejecutaremos el modo dev y veremos que se queda esperando y ya podremos observar que cada que cambiamos un archivo, este se vuelve a compilar automaticamente.

Otra forma de activarlo para una configuracion especifica o forma para preparar el proyecto es en el package.json y es crear la opcion de:

"build:watch": "webpack --watch --config webpack.config.dev.js"

Es recomendable hacer esto de forma en el dev pero se puede hacer con cualquier otro archivo.

Webpack watch

module.exports = {
	watch: true,
}

gg

Es valido recordar que el modo desarrollo no tienen que ser el modo local.

no esta cargando este video

Activar modo watch

  1. En la configuración de dev añadimos la propiedad watch: true
  2. en el package.json añadimos el script "build:watch": "webpack --watch --config webpack.config.js"

Tambien lo podemos usar desde el pckage.json

  "scripts": {
    "dev": "webpack --watch --config webpack.config.dev.js"
  },

Webpack Watch
Agregamos el código watch: true
Ejemplo en el archivo webpack.config.dev.js

  mode: 'development',
    watch: true,

Agregamos los build:watch para que siempre este escuchando los cambios que se estan realizando en el proyecto
Se agrega en el package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack --config webpack.config.dev.js",
    "build:watch": "webpack --watch --config webpack.config.js",
  }, 

Webpack Watch seria como NODEMON

al usar el comano watch en otra opcion de scripts en package.json me funciona pero me da una advertencia de que no tiene sentido tener la linea { watch: true } en el archivo config de webpack que estoy lanzando

Uy en esta clase hay un error, se pierde el audio y se detiene el video ojala puedan arreglarlo pronto

Hola, he estado buscando en Google, pero sigo sin entender las diferencias entre el mode development y production, se que hace que los archivos se vean distintos, pero nada mas.