Activar Watch Mode en Webpack para Desarrollo y Producción

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

• 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

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.