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
👀
Introducción a Webpack
Curso Avanzado de Webpack para Producción Web
Configuración y uso de Webpack para proyectos JavaScript modernos
Proyecto inicial
Configuración y Uso de Webpack en Proyectos JavaScript
Optimización de Proyectos Web con Webpack para Producción
Configuración básica de Webpack para proyectos JavaScript
Loaders y Plugins en Webpack
Integración de Babel y Webpack para compatibilidad JavaScript
Configuración de HTML-webpack-plugin en Webpack
Configuración de Webpack para CSS y Preprocesadores
Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js
Importación de Imágenes con Webpack Asset Module
Optimización de Fuentes Locales con Webpack
Optimización de Proyectos con Webpack: Minificación y Hashing
Alias en Webpack: Simplifica la Importación de Módulos
Deploy del proyecto
Variables de Entorno en Webpack para Proyectos Seguros
Configuración de Webpack para Modo Desarrollo
Configuración de Webpack para Producción y Limpieza de Builds
Activar Watch Mode en Webpack para Desarrollo y Producción
Despliegue de Proyectos Web con Netlify y GitHub
Herramientas de desarrollo complementarias
Configuración de Webpack Dev Server para Desarrollo Local
Análisis de Dependencias con WebPath Bundle Analyzer
Uso de Source Maps en Webpack para Depuración de Código
Integración básica de React.js
Configuración de Webpack y React desde Cero para Producción
Configuración de Webpack en Proyecto React con Babel y JSX
Configuración de Webpack para Proyectos HTML y Servidor Local
Configurar CSS y SaaS en React con Webpack
Configuración de Webpack para Producción en React
Despliegue de Aplicaciones React en Netlify
Próximos pasos
Configuración y Uso de Webpack con React
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
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
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
👀
module.exports = {
...
watch: true
}
package.json
{
"scripts": {
"dev:watch": "webpack --config webpack.config.dev.js --watch"
}
}
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_moduleswatchOptions.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?
.
Para escuchar los cambios de nuestro proyecto y se compile de forma automática nuestro proyecto.
watch: "true",
1.- DESDE Webpack.config.dev.js o Webpack.config.js .
}
....
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
watch: true
"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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?