A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Watch

17/28
Recursos

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸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

<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

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

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

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.

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.

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.

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

2 FORMAS DE ACTIVAR EL WATCH:

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

  • En el archivo webpack.config.js debajo de 鈥渕ode鈥:
}
   ....
    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

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.

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

馃憣